1. 넥스트 BNB프로젝트 생성 및 셋팅

[dlgustn555]

타입스크립트를 사용하는 넥스트BNB 프로젝트에 필요한 라이브러리 설치

npm install next  react react-dom
npm install -D typescript @types/react @types/node @types/react-dom

package.json 에scripts 추가

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

.gitignore 설정

node_modules

.next

eslint 설정 및 eslintrc.json 파엘 rules 및 settiongs 수정

eslint --init

pages 폴더와 간단한 루트 페이지

ㄴ pages/index.tsx 파일 생성

npm run dev 실행하면 자동으로 tsconfig.json파일이 생성된다. 엄격한 타입을 위하여 strict: true 로 수정

스타일링 설정하기 (styled-components 구성)

npm install styled-components babel-plugin-styled-components
npm install -D @types/styled-components -D

ㄴ pages/_document.tsx 파일 생성 (서버사이드랜더링시 스타일적용)
ㄴ .babelrc
{
    "presets": ["next/babel"],
    "plugins": [["styled-components", {"ssr": true}]]
}

svg를 import 하여 사용하기 위한 설정

npm install babel-plugin-inline-react-svg

ㄴtypes/image.d.ts

declare module "*.svg"

ㄴ .babelrc

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", {"ssr": true}], "inline-react-svg"]
}

글로벌 스타일 설정하기

https://github.com/dlgustn555/next-bnb/commit/861580b645c9b771369be2fe226d9bb855623d6a

[dlgustn555]

타입스크립트를 사용하는 넥스트BNB 프로젝트에 필요한 라이브러리 설치

npm install next  react react-dom
npm install -D typescript @types/react @types/node @types/react-dom

package.json 에scripts 추가

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

.gitignore 설정

node_modules

.next

eslint 설정 및 eslintrc.json 파엘 rules 및 settiongs 수정

eslint --init