Next.js는 React 기반의 프레임워크로 React의 기능을 확장하여 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 시스템 기반의 라우팅, 빌드 최적화 등의 기능을 추가적으로 제공합니다.
Next.js와 React 주요 차이점
- 서버 사이드 렌더링(SSR):
- React: 클라이언트 사이드에서만 렌더링을 지원합니다. 즉, JavaScript가 로드되고 실행될 때까지 UI가 화면에 나타나지 않습니다.
- Next.js: 서버 사이드 렌더링을 지원하여 초기 페이지 로드 시 서버에서 HTML을 생성하고 전송합니다. 이로 인해 페이지 로딩 시간이 단축되고 SEO에 유리합니다.
- 정적 사이트 생성(SSG):
- React: 기본적으로 제공하지 않습니다. Gatsby와 같은 다른 프레임워크를 사용하여 SSG를 구현할 수 있습니다.
- Next.js:
getStaticProps와getStaticPaths같은 함수를 제공하여 빌드 타임에 사이트의 정적 버전을 생성합니다. 이는 로딩 시간을 줄이고 성능을 향상시킵니다.
- 파일 시스템 기반 라우팅:
- React: 라우터 라이브러리(예: React Router)를 사용하여 라우팅을 설정해야 합니다.
- Next.js: 페이지의 파일 경로를 기반으로 자동으로 라우팅을 설정합니다.
pages디렉토리에 파일을 추가하면 해당 파일 경로에 해당하는 URL이 자동으로 생성됩니다.
- 빌드 최적화:
- React: 별도의 구성이나 최적화 플러그인이 필요합니다.
- Next.js: 자동으로 코드 분할, 이미지 최적화, 빌드 사이즈 최적화 등을 수행하여 성능을 향상시킵니다.
- 개발자 경험:
- React: 유연하지만, 프로젝트 구조, 라우팅, 최적화 등을 직접 설정해야 합니다.
- Next.js: 초기 설정이 간소화되어 있고, 위에서 언급한 여러 기능이 기본적으로 설정되어 있어 빠른 개발이 가능합니다.
React는 라이브러리로서 UI 구성에 초점을 맞추고, Next.js는 React 위에 구축된 프레임워크로서 개발자가 효율적으로 웹 애플리케이션을 구축할 수 있도록 여러 추가 기능을 제공합니다.
😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀😀