Next.js 맛보기

Next.js란?

 React에서 SSR(Server Side Rendering)을 지원해주는 framework이다.

 Nextjs 공식 사이트

https://nextjs.org/

Next.js by Vercel - The React Framework

SSR이란 서버사이드렌더링의 약자로 CSR의 단점인 로딩 시간의 감소를 위한 기술이다.

CSR은 클라이언트사이드렌더링이고 클라이언트 측에서 html, css, js 파일등을 다운받아서 Rendering한다면, SSR은 서버에서 Rendering한 후 전송하므로 Client에서 Rendering과정 없이 바로 볼 수 있다.

(SSR프레임워크로는 Vue.js에서 사용하는 Nuxt.js도 있다. Vue도 나중에 해봐야지)

또한 SSG와 SSR(Static Site Generator, 정적사이트생성기)을 hybrid로 지원해준다.

SSG는 정적 사이트이다. React를 사용하여 코드를 작성하지만, CSR/SSR은 하지 않는다. 대신 렌더링이 된 정적 파일을 배포하는 것이다. 

 

Next.js  프로젝트 만들기

Next.js는 CRA와 같이 쉽게 build할 수 있다.

npx create-next-app 프로젝트이름

프로젝트 build 완료!

폴더 구조를 보면 CRA로 build한 프로젝트와 다르다.

nextjs폴더구조

cra는 pubilc폴더내 index.html이 있고, src폴더 내 index.js, App.js가 생성 되지만 nextjs프로젝트를 build하면 위의 폴더구조로 나온다.

pages폴더 내 index.js가 있고 pubilc폴더아래에는 index.html이 없다.

 

CNA로 build한다면 package.json에는 이렇게 작성되어 있다.

{
  "name": "nextjs-blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1"
  }
}

next, react, reac-dom을 사용한다.

development모드로 실행할 때 dev로 실행한다.

//npm
npm run dev
//yarn
yarn run dev

그리고 production모드로 실행할 때 build 후 start를 해야 한다.

그렇지 않다면 error를 출력한다.

start를 했을  때 production build를 찾을 수 없다고 한다.

production모드를 실행하려고 한다면 먼저 build를 하자

yarn run build
yarn run start

npm run build
npm run start

 

프로젝트를 실행시켜 보면 깔끔한 ui의 nextjs 화면을 볼수 있다.