공식문서를 보면서 Next.js에 대해 좀 더 정확히 이해해보자.

Next.js 특징

Next.js는 아래와 같은 특징을 가지고 있다고 한다.

• 직관적인 페이지기반 라우팅 시스템
• 프리렌더링, Static Generation(SSG), Server-Side Rendering(SSR)을 페이지별로 지원한다.
• 빠른 페이지 로드를 위한 자동 코드 스플리팅.
• 최적화된 프리패칭을 통한 클라이언트 측 라우팅.
• CSS나 Sass는 내장되어 있으며, CSS-IN-JS를 지원한다고 한다.
• 빠른 새로고침을 지원하는 개발환경.
• 서버리스 함수로 API 엔드포인트를 구축하기 위한 API 경로.(?)
• 확장 가능하다.

몇 가지 이해가 가지 않는 문장들 제외하고는 익숙히 보고 들어왔던 Next.js 특징들이다. 앞으로 Next.js를 제대로 공부해보면서 무엇을 뜻하는지 이해해보자.

시작하기

$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Styled-jsx 에러

공식문서를 따라 템플릿을 받았는데 받자마자 dev서버를 확인해보니 styled-jsx 모듈이 없다는 에러가 뜬다. 원래 Next.js가 내장하고 있는 모듈인데 에러가 뜨는게 이상했지만, npm 으로 설치해주니 오류는 해결했다.

새로고침없는 개발환경

제일 처음은 텍스트를 수정해보는 연습인데, dev 서버가 켜져있는 상태에서 텍스트를 수정하고 저장만해도 바로 반영된다.