Next.js로 마이그레이션하기 - React Router에서(영화 목록1)

React Router 기반 코드를 Next.js로 마이그레이션하는 주요 이유들 중 가장 큰 이유는 SEO(검색 엔진 최적화) 성능 향상이다.

• Next.js는 서버 사이드 렌더링(SSR)을 기본적으로 지원
• 검색 엔진이 JavaScript를 실행하지 않고도 콘텐츠를 크롤링 가능
• 초기 페이지 로드 시 완성된 HTML을 제공하여 검색 엔진 최적화에 유리

장점:

1. SEO 최적화
• 서버 사이드 렌더링(SSR) 기본 지원
• 메타 태그 관리 용이
• 검색 엔진이 콘텐츠를 더 잘 인식
2. 성능 향상
• 자동 코드 분할
• 이미지 최적화
• 정적 페이지 생성(SSG)
• 증분 정적 재생성(ISR)
3. 개발 편의성
• 파일 기반 라우팅
• API 라우트 내장
• 자동 Hot Reloading
• TypeScript 기본 지원
4. 빌드 최적화
• 자동 번들링
• 미리 렌더링
• 자동 폴리필

단점:

1. 학습 곡선
• Next.js만의 규칙과 패턴 학습 필요
• 새로운 개념들 습득 필요
2. 유연성 제한
• 파일 구조가 정해져 있음
• 라우팅 커스터마이징 제한
• Next.js 규칙을 따라야 함
3. 복잡성
• 프로젝트 설정이 더 복잡
• 배포 환경 고려 필요
4. 리소스 사용
• 초기 번들 크기가 더 큼
• 서버 리소스 추가 필요

---

변경점

//1. import 부분
// 이전
import { getMovieDetails, MovieDetail } from '../services/movieApi';
import { useParams, useNavigate } from 'react-router-dom';

// 바뀐 코드
'use client'
import { getMovieDetails, MovieDetail } from '@/services/movieApi';
import { useParams, useRouter } from 'next/navigation';

//2. hooks 사용 부분
// 이전
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();

// 바뀐 코드
const params = useParams<{ id: string }>();
const router = useRouter();

//3. useEffect 내부의 id 참조
// 이전
if (!id) throw new Error('Movie ID is required');
const data = await getMovieDetails(id);
}, [id]);

// 바뀐 코드
if (!params.id) throw new Error('Movie ID is required');
const data = await getMovieDetails(params.id);
}, [params.id]);

//4. 뒤로가기 버튼
// 이전
<BackButton onClick={() => navigate(-1)}>← 이전</BackButton>

// 바뀐 코드
<BackButton onClick={() => router.back()}>← 이전</BackButton>