Next.js

Next.js

React 의 CSR 의 단점을 해결하기 위해 Vercel 에서 만든 프레임워크 입니다.
여기서 말하는 단점 중 대표적인 것은 첫 로딩시 지연되는 문제를 말하고 이러한 이유 때문에 SEO 에서 최적화 하기가 어렵다는 문제가 있습니다.

SetUp

npx create-next-app <프로젝트명>

설치를 하게 되면 기본적인 Next.js 에서 사용하는 모듈(웹팩, 필수 라이브러리)들이 기본적으로 설치되고 폴더 구조도 형성 됩니다.

package.json 안에는 설치한 dependencies 가 있는 것을 확인 할 수 있음.

// 개발 모드
npm run dev
# or
yarn dev

/*
    개발한 내용을 빌드 시켜 `production` 을 할 준비
    react 소스를 js 소스로 변환.
    build 완료시 .next 폴더가 생성됨.
    용량이 커서 성능이 떨어질 수 있고, 보안 쪽 문제가 발생할 수도 있음. 어플리케이션을 동작하기전 build 해서 하기.
    `.next/server/pages/index.html` 에 들어가서 확인 가능함.
*/
// build
npm run build
#or
yarn build

// `Next.js production mode` 시작.
npm start
#or
yarn start

//코드 정리
npm lint
#or
yarn lint

npm run dev or yarn dev 를 하여 개발자모드로 서버가 실행되는지 확인해보자.

pages/

Next 의 가장 큰 장점 중 하나, 라우팅이 상당히 쉬워진다.
pages/ 안에 파일을 작성할 때 마다 그 파일 이름이 곧 url 주소가 됩니다.
예를 들어, 내가 pages 안에 about.js 를 만들면 이제 /about 으로 url 주소가 자동으로 생성이 됩니다.