NextJs

Next.js란?

리액트를 기반으로 한 SPA를 빠르게 빌드할 수 있도록 도와주는 프레임워크.

Next.js의 대표적 특징이자 장점

• 기본적으로 서버사이드 렌더링을 제공함
• 서버사이드 렌더링의 장점
• 검색엔진 최적화
• 초기 로딩 성능 개선
• 그냥 검색엔진 최적화 SEO (Search Engine Optimization)
• 더욱 빠른 페이지 로드를 위한 코드 스플리팅 자동화
• HMR을 지원하는 웹팩 기반 환경
• Express나 Node.js와 같은 http 서버와 함께 구현 가능
• Babel, Webpack 설정 커스터마이징 가능

DataFetch

• isomorphic-unfetch

getInitialProps → 9.3버전부터 변경된 함수들

공통점 : page 컴포넌트에서 사용해야 함.

• getStaticProps

  • SSG
  • 다른 함수들 보다 이 함수를 사용하길 권장
  • 데이터를 캐싱하고 pre-rendering을 진행, 그러기에 좀 더 좋은 성능
  • request에 앞서 페이지를 렌더링할 때 필요한 데이터가 있을 때
  • 데이터가 공식적일 때 (특정 유저랑 관계되면 안됌)
  • 데이터가 headless CMS로 부터 올 때,

  ** headless CMS?

  • 머리는 컨텐츠를 보여줄 수단, 몸통은 컨텐츠를 의미
  • 머리(표현 수단)를 언제든 바꿔 끼울 수 있다는 뜻이다.
  • Headless CMS는 어떻게 작동하는가?
    1. 컨텐츠 편집자와 개발자가 완벽히 분리될 수 있다. 컨텐츠 편집자는 익숙한 GUI로 컨텐츠를 추가/수정/삭제 할 수 있다.

• getStaticPaths

  • getStaticProps를 쓸 때만 사용 가능
  • route가 동적일 때 사용한다. /post/[pId]
  • 단, 그럼 post id가 20000개 가량 있을때도 이걸 pre render할 것이냐..? → 예방방법이 있다함.

• getServerSideProps

  • SSR
  • 요청마다 반환 데이터값이 변화가 많을 경우 이 함수로 호출하면 좋다.
  • 빌드 이후에도 Data 변경가능? 그럼 SSR사용

SSG vs SSR

pre-rendering : 미리 html을 만드는 것.

** 여기서 빌드타임이란? next-build

Static Generation

HTML을 빌드타임에 만들어가지고, 각각 request 보낼 때 재 사용함. getStaticProps를 export해서 사용한다.

bundle.js에도 포함 안됌.(?)

Server-Side Rendering

HTML이 각각 request를 보낼 때 만들어짐. getServerSideProps를 export하여 사용한다.

⚙️ NextJs (with Typescript)프로젝트 시작하기 (CNA방식 X)

Step 1: Set Up Your Next JS Project

https://medium.com/@selvaganesh93/setup-next-js-with-typescript-integration-dece94e43cf5

yarn init -y
npm init --yes

yarn add react react-dom next
npm install react react-dom next

Package.json 파일에 들어가서 다음 스크립트를 추가합니다.

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

Step 2: Install required @types module

yarn add @zeit/next-typescript @types/next @types/react 

Step 3: Create configureation files

Create a next.config.js in your project

// next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

Create a .babelrc in your project

{
  "presets": ["next/babel", "@zeit/next-typescript/babel"]
}

Create a tsconfig.json in your project

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  }
}

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript({
  webpack(config, options) {
    return config
  }
})

The next step in this set up is to add a scripts property to the package.json
file that was generated in the installation above. The property will
include a script to run a local server for development of your project:

{
  ...
  "scripts": {
    "dev": "next"
  }
}

중간에 오류 발생시 필요한 모듈들을 설치해주자!!

npm install --save-dev typescript @types/node @babel/core

TSConfig.json

먼저 타입스크립트를 global로 설치합시다.

$ yarn global add typescript
$ npm install -g typescript

그런 다음 다음 명령어를 입력하면 tsconfig.json 파일이 자동 생성됩니다.

$ tsc --init

tsconfig.json 파일에서는 타입스크립트가 컴파일 될 때 필요한 옵션을 정합니다. 명령어를 알아봅시다.

• target : 컴파일된 코드가 어떤 환경에서 실행될 지 정의합니다. 예를 들어, 화살표 함수를 사용하고 target을 es5로 지정했다면 이를 일반 function키워드를 활용한 함수로 컴파일 해줍니다. 그러나, 이를 es6로 설정했다면 화살표 함수 그대로 유지합니다.
• module : 컴파일된 코드가 어떤 모듈시스템을 사용할지 정의합니다. 이 값을 만약 common으로 하면 export default Sample 코드는 exports.default = Sample로 변환되지만 값을 es2015로 하면 export default Sample을 그대로 유지합니다.
• strict : 모드 타입 체킹 옵션을 활성화합니다.
• esModuleInterop : commonjs 모듈 형태로 이뤄진 파일을 es2015 모듈 형태로 불러올 수 있게 해줍니다.
• outDir : 컴파일된 파일이 어디에 저장될지 경로를 정합니다.
• include : 어떤 파일을 컴파일할 것인지 정합니다.
• exclude : 어떤 파일을 컴파일에서 제외할지 정합니다.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

여기서 우리는 글로벌로 설치한 타입스크립트 CLI를 통해 코드를 컴파일 했는데
만약 프로젝트 디렉토리 내에서 설치한 typescript 패키지를 사용하여 컴파일하려면 다음과 같이 합시다.
(사실 일반적으로는 로컬로 설치한 타입스크립트 패키지를 사용해서 컴파일합니다.)

$ yarn add typescript // npm install --save typescript

package.json

{
  "name": "ts-practice",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "typescript": "^3.9.6"
  },
  "scripts": {
    "build": "tsc"
  }
}

이렇게 설정하면 build 스크립트를 만들어서 편리하게 컴파일할 수 있습니다.