리액트 기반의 프레임워크. 리액트 개발자에게 생산성과 편의성을 증대시켜 주며 이는 곧 React의 단점(SPA의 단점)을 커버해 준다는 것을 의미합니다.
이러한 특징은 SPA의 장점이자 단점이 되는데, 모든 JS 코드를 불러와야 하기 때문에 처음 페이지를 불러올 때 시간이 오래 걸리게 됩니다.
또한 SPA는 검색 엔진 최적화(SEO)에 좋지 않습니다.
이 두 가지의 문제는 서버사이드렌더링(SSR)을 사용함으로써 해결할 수 있습니다.
Next.js는 SPA와 SSR의 단점을 해결하기 위해서 리액트에 서버사이드렌더링 기능을 더하여 SPA와 SSR의 장점을 가질 수 있게 됩니다.
이러한 개발 환경을 설정하는 번거로움을 줄일 수 있는 것이 Next.js의 특징 중 하나입니다.
Next.js의 특징들을 살펴봅니다.
Next 개발 환경에서는 코드 변경 사항이 저장되면 응용 프로그램을 자동으로 다시 로드합니다. 개발 모드일 때 소스코드를 저장하면 오른쪽 하단에 애니메이션 아이콘이 생기며, 이는 Next가 응용 프로그램을 컴파일 하고 있다는 것을 의미합니다.
자동 코드 분할 기능 덕분에 코드의 모든 가져오기가 번들로 묶여 각 페이지와 함께 제공됩니다. 결과적으로, 불필요한 코드가 페이지에 로드되지 않게 됩니다.
Next는 기본적으로 웹팩과 바벨을 사용하고 있습니다. 웹팩과 바벨을 사용하여 서버 사이드 렌더링 및 개발에 필요한 설정이 이미 되어 있어 빠르게 개발을 시작할 수 있습니다. 사용하고싶은 플러그인 또한 손쉽게 추가하여 사용할 수 있도록 지원하고 있습니다.
타입스크립트는 자바스크립트의 superset인 오픈소스 프로그래밍 언어입니다. 기존의 자바스크립트 문법을 그대로 사용하면서 정적 타입 언어의 장점을 가질 수 있습니다.
Next를 타입스크립트와 함께 사용할 때 타입 지원을 통해 편리함과 안정성을 얻을 수 있습니다.
Next는 타입스크립트 설정을 따로 할 필요 없이 사용할 수 있으며 타입스크립트를 지원하고 있습니다.
리액트에서는 route를 위해서 react-router
라는 라이브러리를 사용하여 라우팅 설정을 해주어야 합니다. 그로 인해 페이지의 경로에 대하여 직접 설정을 해주어야 하였지만, Next는 파일 시스템 기반 라우팅을 사용합니다. 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편리하다는 장점이 있습니다.
Next는 자체 CSS-In-JS인 styled-jsx를 지원합니다. 기본으로 제공하는 기능이기 때문에 스타일을 서버 사이드 렌더링 하기 위한 설정이 필요하지 않습니다.