Next.jsでTypescript導入するとき特に何もしなくていいよって話

概要

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に変更してもちゃんと動きます。