Next 초기 설정

Sohyeon Bak·2022년 9월 26일

Next.js: The React Framework
Next.js는 리엑트 어플리케이션에서 SSR을 쉽게 구현해주는 프레임워크이다.

기능

직관적인 페이지 기반의 라우팅 시스템(다이나믹 라우팅도 지원)
Pre-rendering, SSG(static generation)과 SSR(server-side rendering) 둘 다 페이지 기반 단위에서 지원해준다.
자동 code spliting으로 빠른 페이지 로드
최적화된 prefetching과 함께 Client-side routing
Built-in CSS와 Sass 지원, CSS-in-JS 라이브러리 지원
Fast Refresh과 함께 개발 환경 지원
serverless 함수로 API 엔드포인트를 빌드하기 위한 API routes
충분한 확장성(webpack, babel 등)

📌 Pre-rendering
기본적으로 Next.js는 모든 페이지를 미리 렌더한다.
이것은 Next.js가 클라이언트 측 JavaScript로 모든 것을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성하는 것을 의미한다.
Pre-rendering은 SEO와 performance에서 더 나은 결과를 가져올 수 있다.
각각 생성된 HTML은 각 페이지에 필요한 최소한의 JavaScript 코드와 연관되어진다.
페이지를 브라우저에서 로드할 때, JavaScript 코드는 페이지에 충분한 인터렉션이 만들어지고 수행된다. (이 과정은 hydration 이라고 한다.)

초기 세팅

라이브러리 추가
yarn add next react react-dom
package.json 'scripts'에 추가

"scripts": {
  "dev": "next dev", // deveopment 모드에서 실행
  "build": "next build", // 상품 사용을 위한 어플리케이션 빌드 실행
  "start": "next start", // production 서버에서 실행
  "lint": "next lint" // built-in ESLint configuration
}