nextjs/마이그레이션 예제 2

Next.js로 마이그레이션하기(영화목록 2)

MovieDetailPage 부분1. 파일 상단에 'use client' 지시문 추가**제목'use client'Next.js 13 이상에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트이다.React hooks를 사용하는 컴포넌트는 클라이언트 컴포넌트로 지정해야 하므로 'use client' 지시문이 필요// 기존 React Routerconst { id } = useParams();const navigate = useNavigate();// Next.jsimport { useParams, useRouter } from 'next/navigation'; const params =useParams(); const id = params?.id as string; // ?가 없을 경우 const route..

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

React Router 기반 코드를 Next.js로 마이그레이션하는 주요 이유들 중 가장 큰 이유는 SEO(검색 엔진 최적화) 성능 향상이다.Next.js는 서버 사이드 렌더링(SSR)을 기본적으로 지원검색 엔진이 JavaScript를 실행하지 않고도 콘텐츠를 크롤링 가능초기 페이지 로드 시 완성된 HTML을 제공하여 검색 엔진 최적화에 유리장점:SEO 최적화서버 사이드 렌더링(SSR) 기본 지원메타 태그 관리 용이검색 엔진이 콘텐츠를 더 잘 인식성능 향상자동 코드 분할이미지 최적화정적 페이지 생성(SSG)증분 정적 재생성(ISR)개발 편의성파일 기반 라우팅API 라우트 내장자동 Hot ReloadingTypeScript 기본 지원빌드 최적화자동 번들링미리 렌더링자동 폴리필단점:학습 곡선Next.js만의..