개발 환경 설정하기 | Next.js for Mac

Node.js는 다양한 웹 개발 플랫폼을 지원하는데, 그 중 SPA(Single Page Application)를 제작해 주는, React와 Vue.js등의 CSR(Client Side Rendering) 프레임워크가 한동안 매우 인기였다. 브라우저 동작 기반으로 한 CSR은 웹서버의 부담을 상당히 줄일 수 있었고, 뛰어난 퍼포먼스를 보여주었지만, SEO(Search Engine Optimization) 한계로 인하여, 서버에서 웹을 랜더링하는 SSR(Server Side Rendering)이 다시 부각됨.

 

Next.js

Next.js는 React의 프레임워크입니다. 인기 있는 React 기반이며, CSR과 SSR의 장점을 모두 가지고 있어 많은 곳에서 사용 중입니다.

설치

• 프로젝트 디렉토리를 생성하고, 이동합니다.

$ mkdir myapp; cd myapp

• NPM을 이용하여, package.json 생성합니다. (자동 설정)

$ npm init -y
----( or ) ----
$ yarn init -y

• NPM을 이용하여, next react react-dom을 설치합니다.

$ npm install next react react-dom --save
----( or ) ----
$ yarn add next react react-dom

• package.json에 스크립트를 추가합니다.

{
  "name": "myapp",
  ......
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  ......
}

• pages, public 디렉토리를 생성합니다.

$ mkdir pages public

테스트

• 프로젝트 디렉토리로 이동합니다.

$ cd myapp

• pages/index.js 파일을 작성합니다.

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

• NPM을 이용하여, 프로그램을 실행합니다.

$ npm run dev

> myapp@1.0.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - compiling...
event - compiled client and server successfully in 514 ms (112 modules)

• 브라우저를 이용하여, 테스트 합니다.

 

Welcome to Next.js!