📁 Next.js 프로젝트에 TypeScript 적용하기

🗒 Next.js 프로젝트에 TypeScript 적용하기

• 이미 생성된 Next.js 프로젝트에 TypeScript를 적용하기 위해서는, 아래의 명령어를 통해 빈 tsconfig.json 파일 생성

$ touch tsconfig.json

• 이 후 next(npm run dev 또는 yarn dev)를 실행하면 Next.js가 필요한 패키지 설치 과정을 안내하며 설정을 완료

$ yarn dev

# You'll see instructions like these:
#
# Please install TypeScript, @types/react, and @types/node by running:
#
#         yarn add --dev typescript @types/react @types/node
#
# ...

• tsconfig.json` 파일이 자동으로 설정됨

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

• .js 파일을 .tsx 또는 .ts로 변경하고, TypeScript를 적용

참고

• nextjs - TypeScript
• Next.js 프로젝트에 TypeScript를 적용하는 방법에 대해서 알아봅시다.