개요

Next.js 진짜로 친절, Typescript 도입에 무엇인가 특히 하는 일 없어서 이야기입니다

Next.js에서 Typescript를 도입 할 때

create-next-app에서 Next.js 프로젝트를 만듭니다.

> npx create-next-app

그때 생성된 프로젝트에는 Typescript는 포함되어 있지 않습니다.

package.json

{
  "name": "hoge",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

Typescript를 설치합니다.

> yarn add --dev typescript @types/react @types/node

이제 yarn run dev를 실행합니다.
그러면 아래와 같은 로그가 표시됩니다.

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
We detected TypeScript in your project and created a tsconfig.json file for you.

We detected TypeScript in your project and created a tsconfig.json file for you.

Typescript가 있는 것을 찾았으니까, tsconfig.json 만들었어, 라고 하는 것이군요.
진짜 친절.

이제 기본 index.js을 index.tsx로 변경해도 제대로 작동합니다.