Next.js란?
리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크
프론트 단의 UI구성은 React로 하고, Next.js를 사용해 추가 기능과 최적화 수행 가능
리액트에 없느 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 다양한 기능들을 제공
Next.js의 특징
사전 렌더링 및 서버 사이드 렌더링
클라이언트 사이드 렌더링(CSR)의 경우 모든 JS파일을 로드하고 그 이후에 사용자가 화면을 보게 되는데, 이렇게 되면 사용자는 많은 시간을 기다려야 한다. 하지만 서버사이드 렌더링은 서버에서 JS를 로딩함으로 클라이언트 측에서 JS를 로딩하는 시간이 줄어들게 된다.
Next.js는 기본적으로 빌드 시에 만든 모든 페이지를 미리 렌더링 한다.
이렇게 될 경우 처음 페이지를 불러올 때 사용자에게 화면이 빠르게 보이게 되고, 때문에 HTML이 미리 렌더링 되어 SEO에도 좋다.
HTML을 불러온 후에는 페이지에 필요한 최소한의 JS 코드를 불러와 페이지를 사용할 수 있다.
Hot Module Replacement 지원
HMR은 브라우저를 새로 고치지 않아도 Webpack으로 빌드한 결과물이 웹에 실시간으로 반영될 수 있게 도와준다.
때문에 코드를 저장할 때마다 실제로 변경된 모듈만 다시 로드해 애플리케이션의 상태를 유지하고 변경 사항을 확인하는 데 필요한 시간을 크게 줄일 수 있다. 또한 페이지가 실시간으로 반영되기 때문에 생산성이 향상되고, 개발자가 개발 중에 변경한 사항을 볼 수 있기 때문에 개발 시간도 단축되는 장점이 있다.
자동 코드 분할(Code Splitting)
보통 개발을 진행하며 JavaScript 프로젝트를 생성할 때 모든 코드를 하나의 Bundle로 만든다. 이는 프로젝트 규모가 커질수록 브라우저가 파싱해야 하는 정보가 많아지기 때문에 앱 초기 구동 속도가 느려지게 된다.
하지만, next.js는 자동 코드 분할 기능 덕분에 코드의 모든 가져오기가 번들로 묶여 각 페이지와 함께 제공된다. 결과적으로, 불필요한 코드가 페이지에 로드되지 않게 된다.
설정이 필요 없다.
Next는 웹팩과 바벨을 사용하고 있기 때문에 서버 사이드 렌더링 및 개발에 필요한 설정이 이미 되어 있어 빠르게 개발을 시작할 수 있다.
TypeScript 내장
Next는 TypeScript를 지원하고 있어 설정을 따로 할 필요 없이 사용할 수 있다.
파일 기반 Routing 기능
Next는 파일 시스템 기반 라우팅을 사용한다. 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편하다.
styled.jsx 지원
Next는 자체 CSS-IN-JS인 styled-jsx를 지원하기 때문에 스타일을 서버 사이드 렌더링 하기 위한 설정이 필요하지 않다. 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들수 있다.
Next로 프로젝트 생성하는 방법
npx create-next-app@latest
Next의 작동 방식
- 사용자가 초기에 server에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 될 HTML을 보낸다.
- 브라우저에서 JavaScript를 다운받고 React를 실행한다.
- 사용자가 페이지와 상호작용하며 다른 페이지로 이동할 경우 CSR방식으로 server가 아닌 브라우저에서 처리한다.
