create-next-app 설치

Next.js 프로젝트를 생성할 수 있게 해주는 cli도구를 먼저 설치합니다.

yarn global add create-next-app

프로젝트 생성

저는 til을 위해 만드는 프로젝트이므로 til 로 이름 짓겠습니다.

create-next-app til

typescript 설치

typescript 세팅

yarn add -D typescript @types/react @types/node
touch tsconfig.json
yarn dev

여기까지 입력하면 tsconfig.json 파일의 내용이 자동으로 채워지며, next-env.d.ts 파일이 자동 생성됩니다.

기존 파일을 typescript로 변경

• pages/_app.js : https://github.com/vercel/next-learn-starter/blob/master/typescript-final/pages/_app.tsx
• pages/index.js : https://github.com/vercel/next-learn-starter/blob/master/typescript-final/pages/index.tsx
• pages/api/hello.js : https://github.com/vercel/next-learn-starter/blob/master/typescript-final/pages/api/hello.ts

eslint 설치

yarn add -D eslint eslint-config-airbnb-typescript eslint-plugin-react @typescript-eslint/eslint-plugin eslint-plugin-jsx-a11y eslint-plugin-import
touch .eslintrc.json

아래 내용을 .eslintrc.json 에 붙여넣습니다.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "airbnb-typescript"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off"
    }
}