- React를 사용하여 SSR(Server-Side Rendering) 및 정적(Static) 웹사이트를 구현하기 위한 웹 프레임워크이다.
🍯 Next.js는 리액트 공식 문서에서 Create React App, Gatsby와 더불어 권장 도구로 추천되어 있다.- Vercel이 개발하고 리액트와 마찬가지로 JSX문법으로 작성된다.
- Next.js를 사용하기 위해서는 Node.js가 필요하다.
🍅 npx create-next-app@latest로 간단히 Next.js 프로젝트를 시작할 수 있다.
🍅 또는 yarn을 사용하기 위해서는 yarn create next-app로 시작한다.
🍅 --ts 나 --typescript 옵션을 사용해 타입스크립트 프로젝트를 시작할 수 있다.
🍓 Next.js를 사용하는 이유
-
기존의 리액트 프로젝트(CSR)는 처음에 웹 페이지를 불러오는데 걸리는 시간이 길다.
-
하지만 Next.js를 이용한 SSR은 렌더링이 CSR에 비해서 빠르다.
🍉 사전 렌더링(SSR) 후에는 CSR 방식으로 동작하기에 Next.js는 빠른 속도의 클라이언트 앱을 제공할 수 있다. -
CSR은 페이지를 불러오기 전에는 텅 빈 문서로 보이기에 검색 엔진 최적화 (Search engine optimization, SEO)에 불리하다.
-
반면에 Next.js, SSR은 사전 렌더링(pre-render)이 일어나기에 SEO에 유리하다.
🍰 사전 렌더링은 서버에 사전에 저장된 render tree의 HTML을 불러오는 것을 의미한다. 즉, Next.js는 미리 모든 페이지를 렌더링한다.
🍰 사전 렌더링이 없는 React 앱은 자바스크립트가 비활성되면, 사이트가 비활성화된다. -
Next.js는 프로젝트를 시작하기 위해서 최소한의 설정만을 요구하기에 사용하기에 간편하다.
🌳 컴파일, 번들링 등은 내부적으로 처리된다. -
또한 Next.js는 (S)CSS와 TypeScript를 내장하여 지원하고 있다.
-
hot reloading 기능이 있어 변경 사항을 탐지하면 수정된 페이지를 다시 렌더링하기에 다시 서버를 시작하지 않아도 된다.
-
개발의 편의를 위한 페이지 기반 라우팅과 동적 라우팅 기능을 제공한다.
☕ 파일 시스템 기반 라우팅으로 폴더 경로에 따라 페이지의 경로가 설정된다. -
hot-module replacement 기능이 있어 실시간으로 모듈을 교체할 수 있다.
-
automatic code splitting (자동 코드 분할) 기능이 있기에, 페이지를 불러오는데 필요한 코드만 포함된다.
-
페이지를 불러오는 시간을 줄이기 위한 page prefetching 기능이 있다.
참고 자료 출처 : https://en.wikipedia.org/wiki/Next.js#cite_note-React_documentation-4, https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains
Next.js 공식 가이드 문서 : https://nextjs.org/learn/foundations/about-nextjs
