Next.js
리액트를 위해 만들어진 오픈소스 자바스크립트 웹 프레임워크이며 리액트에 없는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 증분 정적 재생성(ISR)과 같은 다양하고 풍부한 기능을 제공한다.
확장이 용이하고 유지보수가 쉬운 웹 애플리케이션을 만드는 여러가지 방법을 제공하는데 기본적으로 클라이언트 사이드에서만 작동하는 리액트의 문제점을 해결해준다.
리액트의 문제점
사용자의 웹 브라우저에서만 실행되기 때문에 리액트를 사용한 웹 애플리케이션은 엔진 최적화(SEO)의 효과를 거의 볼 수 없으며, 첫 화면에 웹 애플리케이션을 제대로 표시하기 위해 애플리케이션 실행 초기에 성능 부담이 생긴다. 이를 해결하기 위해 웹 애플리케이션을 서버에 미리 렌더링 해두는 방법을 연구하게 되는데, 이러한 연구의 결과로 Next.js가 탄생했다.
Next.js의 기능
- 정적 사이트 생성
- 증분 정적 콘텐츠 생성
- 타입스크립트에 대한 기본 지원
- 자동 폴리필 polyfill 적용
- 이미지 최적화
- 웹 애플리케이션의 국제화 지원
- 성능 분석
React to Next.js
Next.js의 기본철학은 리액트와 유사하다. '설정보다 관습'이라는 취지로 만들어졌기 때문에 복잡한 설정없이도 기능을 사용할 수 있는 쉬운 방법을 찾을 수 있다.
설정보다 관습(convention-over-configuration) : 개발자가 해야 할 결정의 수를 줄여주면서도 유연성은 잃지 않도록 하는 소프트웨어 설계 패터다임
예를 들어 단일 Next.js 애플리케이션에서 별도의 설정 파일을 만들지 않고도 어떤 페이지에 서버 사이드 렌더링을 적용하고 어떤 페이지에 정적 페이지 생성을 적용할지 지정할 수 있다.
각 페이지에서 특정 함수를 익스포트 하면 Next.js가 나머지 일을 알아서 처리한다.
하지만 서버 사이드 렌더링 페이지나 정적으로 생성된 페이지 모두 Node.js에서 실행되기 때문에 fetch, window, document와 같이 웹 브라우저에서 제공하는 전역 객체나 canvas같은 HTML 요소에는 접근할 수 없다.
리액트와 Next.js의 가장 큰 차이점은?
리액트는 자바스크립트 라이브러리이며 Next.js는 프레임워크이다.
Next.js 시작하기
Node.js와 npm설치 후 create-next-app으로 Next.js앱을 시작할 수 있는 코드를 생성해준다
npx create-next-app <app-name>이후 npm run dev 명령을 실행하면 개발 서버가 시작되며, 3000번 포트로 접근하여 웹 페이지를 볼 수 있다.
기본 코드가 생성되고 나면 다음과 같은 구조의 디텍토리가 만들어진다.
- README.md
- next.config.js
- node_modules/
- package-lock.json
- package.json
- pages/
- _app.js
- api/
- hello.js
- index.js- public/
- favicon.ico
- vercel.svg- styles/
- Home.module.css
- globals.css
리액트에서는 내비게이션을 위한 react-router 또는 비슷한 라이브러리를 이용해야 하는데 Next.js 에서의 내비게이션은 pages/ 디텍토리를 이용하기 때문에 훨씬 쉽다.
pages/ 디텍토리 안의 모든 자바스크립트 파일은 퍼블릭 페이지가 되며, pages/ 디텍토리의 index.js 파일을 복사해서 about.js로 이름을 바꾸면 http://localhost:3000/about 주소로 접근했을 때 똑같은 페이지를 볼 수 있다.
public/ 디텍토리에는 웹 사이트의 모든 퍼블릭 페이지와 정적컨텐츠가 있다. 이를테면 이미지파일, 컴파일된 CSS 스타일 시트, 컴파일된 자바스크립트 파일, 폰트 등이다.
style/ 디텍토리는 웹 애플리케이션에서 사용하는 스타일 시트를 여기에 둘 수 있지만, 꼭 필요한 것은 아니다.
또한 프로젝트 최상위 디텍토리에 필요한 디텍토리나 파일을 추가해도 Next.js의 빌드 및 개발 프로세스에는 아무런 영향을 주지 않으며 컴포넌트를 components/ 디텍토리 아래, 유틸리티 기능을 utillties/ 디텍토리에 두고 사용해도 아무 상관이 없다.
타입 스크립트 지원
Next.js는 타입스크립트로 작성된 프레임워크이기에 태생적으로 고품질의 타입 정의를 지원한다.
프로젝트의 최상위 디텍토리 안에 tsconfig.json이라는 타입스크립트 설정 파일만 만들면 된다.
그리고 npm run dev 명령을 실행하면 다음과 같은 메세지를 확인할 수 있다.
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Please install typescript, @types/react, and @types/node by running:
npm install --save-dev typescript @types/react @types/node
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
Next.js가 타입스크립트를 사용한다는 것을 인식하고 프로젝트가 사용하는 주 언어에 대한 의존성 패키지 설치를 요청한다. 필요한 경우 이 파일의 내용을 수정해서 타입스크립트 설정을 바꿀 수 있지만 Next.js가 바벨의 @babel/plugin-transform-typescript를 사용해서 설정 파일을 관리하기 때문에 다음 주의사항을 숙지해야 한다.
● @babel/plugin-transform-typescript 플러그인은 타입스크립트에서 자주 사용하는 const enum을 지원하지 않습니다. const enum을 사용하고 싶다면 바벨 설정에 babel-plugin-const-enum을 추가해야 합니다. 자세한 내용은 <바벨과 웹팩 설정 커스터마이징>에서 설명합니다.
● export =와 import = 구문은 사용할 수 없습니다. 두 가지 모두 ECMAScript 코드로 컴파일할 수 없기 때문입니다. babel-plugin-replacets-export-assignment를 설치하거나 import x, {y} from 'same-package' 또는 export default x와 같은 올바른 ECMAScript 구문으로 바꾸어야 합니다.
이외에도 많은 주의사항이 있는데 이는 공식 바벨 문서를 참고하자.
