Next.js를 사용해보고 싶어 알아보았다.

*공식 문서 를 보며 정리하였다.

Next.js란?

Next.js 홈페이지를 들어가면 메인 페이지에 다음과 같이 나와있다.

Next.js는 Vercel에서 제공하는 React 프레임워크이며

• hybrid static & server rendering
• TypeScript support
• smart bundling
• route pre-fetching

등을 제공하며 config가 필요없다.

Next.js에서 소개하는 주요한 특징을 몇 가지 알아보자.

Hybrid: SSG와 SSR

SSG(Static Site Generation)와 SSR(Server Side Rendering)을 지원한다.

SSR를 비교적 쉽게 구현할 수 있다는 점에서 Next.js를 많이 선택하는 것 같다.

따라서 Next.js에서는 세 개의 렌더링 모드를 제공한다.

• SSG(Static Site Generation)
• SSR(Server Side Rendering)
• CSR(Client Side Rendering)

Next.js의 이 세가지 렌더링에 대해 잘 정리해놓은 이 글 을 참고하면 좋을 것 같다.

SSG는 좀 낯설었는데, 이 글에 의하면 SSR과 비슷하나 요청 시가 아니라 빌드 시에 페이지를 렌더링하는 방식이라고 한다.

Zero Config

컴파일과 번들링이 자동화되어 있어 설정의 번거로움이 적다.

Built-in CSS 지원

Built-in Sass를 지원하고 있어 scss를 쓰기 간편하다.

TypeScript 지원

타입스크립트 설정과 컴파일이 자동화되어 있다.

Next.js를 사용하는 서비스

Netflix, Github, Starbucks, docker, Uber, Nike 등 많은 서비스에서 Next.js를 사용하고 있다.

Next.js를 사용하는 기업을 더 보고 싶다면 이 Discussion 을 참고하면 좋을 것 같다.

시작하기

yarn이 아닌 npm 기준으로 명령어를 사용했다.

새로운 Next.js 앱을 만들기 위해서 create-next-app 을 사용한다.

npx create-next-app

next react react-dom 을 설치한다.

npm install next react react-dom

package.json의 scripts에 다음과 같이 추가한다.

"scripts": {
	"dev": "next dev", // 개발 모드 실행
	"build": "next build", // 프로덕션 용도로 빌드
	"start": "next start" // 프로덕션 서버에 시작
}

프로젝트안에 pages 디렉토리를 만들고, 그 안에 다음과 같이 index.js 파일을 만든다.

function HomePage() {
	return <div>Welcome to Next.js!</div>
}

export default HomePage

이제 다음 명령어를 실행하면 [localhost:3000](http://localhost:3000) 에 실행된다.

npm run dev

글을 마무리하며

Next.js를 사용하기에 앞서 nextjs.org를 참고하여 Next.js가 무엇인지와 기초 세팅 방법까지 알아보았는데, 다음에는 직접 프로젝트를 해보고 Next.js의 장단점을 느낀 것에 대한 글을 작성해보고 싶다.