2024. 7. 1. Next.js

특징

 

서버 사이드 렌더링(SSR): Next.js는 서버에서 초기 HTML을 생성하여 클라이언트로 전달한다. 이로 인해 페이지 로드 시간이 단축되고 SEO가 향상된다.

 

정적 사이트 생성(SSG): 빌드 타임에 HTML을 생성하여 클라이언트에 전달한다. 정적 파일이므로 빠른 로딩 속도를 제공하고, CDN을 통해 쉽게 배포할 수 있다.

 

자동 코드 분할: 페이지 단위로 코드를 분할하여 초기 로딩 시간을 줄이고, 필요한 페이지를 로드할 때만 관련 코드를 불러온다.

 

라우팅: 파일 시스템 기반의 라우팅을 제공하여 별도의 라우팅 설정 없이 파일을 추가하면 자동으로 라우팅이 설정된다.

 

API 라우트: API 엔드포인트를 쉽게 설정할 수 있어 서버리스 함수나 간단한 백엔드 로직을 구현할 수 있다.

 

---

기능

페이지 생성: pages 디렉토리에 파일을 생성하면 자동으로 해당 파일명이 URL 경로가 된다. 예를 들어, pages/about.js 파일을 생성하면 /about 경로로 접근할 수 있다.

 

getServerSideProps: 서버 사이드에서 데이터를 페칭하여 페이지에 전달할 수 있는 함수로, SSR을 구현할 때 유용하다.

 

getStaticProps: 빌드 타임에 데이터를 페칭하여 정적 페이지를 생성하는 함수로, 블로그나 문서 사이트를 만들 때 유용하다.

 

링크 컴포넌트: next/link 모듈을 사용하여 클라이언트 사이드 내비게이션을 구현할 수 있다. 이로 인해 페이지 전환 속도가 빨라진다.