Next.JS란?

Next.JS란?

Next.js는 Vercel에서 만든 React를 기반으로 한 오픈 소스 프레임워크이다. 리액트와 달리 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 다양하고 풍부한 기능을 제공한다. 또한 개발자들이 쉽게 빠르고 확장 가능하며 검색 엔진 최적화(SEO) 친화적인 웹 애플리케이션을 구축할 수 있도록 지원한다.

서버 사이드 렌더링(SSR): 웹 애플리케이션에서 페이지를 서버 측에서 생성하고 렌더링하는 기술. 각 요청에 대해 서버에서 HTML 페이지를 생성하여 초기 렌더링에 필요한 모든 데이터와 마크업을 포함할 수 있다. 이는 애플리케이션의 인지 성능을 향상시키고, 검색 엔진이 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있게 한다.

정적 사이트 생성(SSG): SSG를 사용하면 HTML 페이지가 빌드 시간에 생성되고 정적 에셋으로 제공되어 각 요청마다 서버 사이드 렌더링이 필요하지 않게 된다. SSG는 콘텐츠가 많은 웹사이트나 업데이트 빈도가 낮은 애플리케이션에 적합하며, 빠른 로딩 시간과 효율적인 캐싱을 가능하게 한다.

증분 정적 재생성(ISR): 정적 생성으로 미리 만들어놓은 사이트들도 필요시 업데이트. 이를 이용한다면 정적 생성의 장점을 취하되 단점을 보완할 수 있다.

검색 엔진 최적화(SEO): 검색엔진 결과 페이지에서 웹사이트 또는 웹페이지의 상위 노출도를 높이는 작업.

Next.JS의 주요 기능

자동 코드 분할

각 페이지에서 사용되는 컴포넌트를 기반으로 애플리케이션 코드를 자동으로 작은 번들로 분할하여 사용자가 현재 페이지에 필요한 코드만 다운로드한다. 이로 인해 로딩 시간이 단축되고 성능이 향상된다.

자동 페이지 라우팅

pages 디렉토리의 파일 구조를 기반으로 자동으로 페이지 라우팅을 처리한다. 이를 통해 개발 프로세스가 간소화되고 수동으로 라우트를 구성할 필요가 없다.

통합된 API 개발

Next.js는 개발자들이 애플리케이션 내에서 쉽게 서버리스 API 경로를 생성할 수 있도록 지원하여, 풀 스택 애플리케이션 개발 프로세스를 간소화하고 프론트엔드와 백엔드 간의 원활한 통신을 가능하게 한다.

하이브리드 렌더링

서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 모두 지원하여 개발자들이 특정 사용 사례에 가장 적합한 방식을 선택하거나 하나의 애플리케이션 내에서 두 기술을 결합할 수 있다.