Next.js by Vercel - The React Framework
Next.js by Vercel - The React Framework
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
nextjs.org
사이트 대문을 보면 프로덕션을 위한 리액트 프레임웍이라고 설명하고 있다.
CRA와 같은 스타터 프로젝트로서 CNA를 사용할 수 있다.
CRA와의 큰 차이점은 react 개발 경험을 프레임웍 형태로 짜임새 있게 코딩할 수 있게 해놨다는 점이다.
CNA 사용으로 누릴 수 있는 장점
- 라우팅을 손쉽게 할 수 있다. 웹 페이지 하나를 뚝딱 만들어 서비스 가능
- Server side rendering (이하 SSR) 을 손쉽게 구현 가능.
- Static site generation (이하 SSG) 기본 기능이며. 페이지 단위의 컴포넌트를 미리 정적소스로 만들어둠. (빌드시점에)
- 제공되는 next lint를 이용하여 프레임웍 개발 경험에 일관성을 줄 수 있음.
- Fast refresh가 기본옵션인데 소스 수정시 컴포넌트의 local state를 잃지 않으면서 빠르게 개발 가능.
- 공식문서가 잘되어있다.
- 커스텀에 대비가 잘 되어있다.
- 다음 리액트 버전도 대비하고 있다.
- typescript 지원도 잘되어있다. cra와 다르게 tsconfig paths와 baseUrl 옵션도 지원을 해준다.(module alias 이용 가능)
평소 사용해왔던 CSR과 SSR의 차이 그리고 SSG
- CSR (Client side rendering) - 페이지를 렌더링 하는 주체가 클라이언트. 브라우저에 js가 로드 된 뒤로부터 화면을 렌더링 하기 시작.
- SSR (Server side rendering) - 사용자가 페이지를 서버에 요청하면 서버가 해당 페이지를 렌더링하여 html로 브라우저에 응답해줌.
- SSG (Static site generation) - 사용자가 페이지를 서버에 요청하면 서비스 이전에 미리 만들어둔(빌드시점에 미리 만듬) 정적 자원(html)을 브라우저에 응답해줌.
SSG의 경우 외부 데이터에 의해 페이지 정보가 자주 업데이트 되는 페이지에는 어울리지 않음. 즉 데이터에 의존적인 페이지는 SSR이나 CSR을 이용해야 한다. 그 외 정적인 페이지는 모두 SSG를 이용하면 좋다.
참고
서포트 브라우저는 IE11을 포함한 모던브라우저가 기본값이다.
링크
튜토리얼이 아주 쉽고 이해 쏙쏙 되도록 잘 되어있다.
Learn | Next.js
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.
nextjs.org