---

Next.js 실행

프로젝트에 Next.js를 적용하는 방법은 다음과 같다.

React, React-DOM, Next 설치

아래 명령어를 통해 React, React-DOM, Next를 설치한다.

npm i react
npm i react-dom
npm i next

scripts 추가

프로젝트의 package.json파일의 scripts속성을 다음과 같이 수정한다.

"scripts": {
  // "test": "echo \"Error: no test specified\" && exit 1"
  "dev": "next"
},

이외 scripts는 다음과 같은 속성을 지원한다.

속성	역활
dev	개발 모드에서 Next.js를 시작
build	build프로덕션 사용을 위한 애플리케이션 빌드
start	startNext.js 프로덕션 서버를 시작
lint	lintNext.js의 내장 ESLint 구성

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

pages 폴더 생성

프로젝트 루트 디렉토리에 pages폴더를 생성한 뒤 index.js파일에 페이지에 랜더링될 코드를 작성한다.

이 때 유의해야할 점은 Next.js는 pages폴더를 인식해서 안에 있는 파일들을 개별적인 파일 즉 코드 스플릿팅된 파일로 만들기 때문에 pages의 폴더 이름은 정확하게 입력해야 한다.

코드 스플릿팅(Code Splitting)은 webpack, rollup, browserify..등과 같이 모듈 번들러를 이용하여 하나의 번들 파일을 여러 번들 파일로 나누는 것

// index.js
import React from 'react';

const Home = () => {
  return (
    <div>Hello, Next!</div>
  );
}

export default Home;

스크립트 실행

아래 명령어를 통해 Next.js 스크립트를 실행하면 개발 서버의 주소가 출력된다.

npm run dev

출력된 개발 서버로 접속해보면 다음과 같이 정상적으로 화면에 랜더링되는 것을 확인할 수 있다.

---

참고 자료

Next.js 공식문서
React로 NodeBird SNS 만들기 - 제로초