😘

今さら聞けないNext.jsをTypeScript化する方法【2021年4月版】

2021/04/06に公開

Next.js

「個人開発で新技術の興味のままに技術選定をするとだいたい完成しない」

どうも、Yukito Ohiraです。

今回は、Next.jsプロジェクトを新規作成してTypeScript化するまでの手順をまとめていこうと思います。

前提条件

node 14.16.0
npm 6.14.11
yarn 1.22.4
create-react-app 4.0.3

npm install -g create-react-app でインストールしておく

手順概要

create-react-appでnext.jsプロジェクトを作成
生の状態での起動確認
typescriptの初期設定をする
pages/以下の.jsファイルをtsxファイルにリネーム

手順詳細

create-react-appでnext.jsプロジェクトを作成

yarn create next-app

を実効。アプリケーション名を聞かれるので、入力（ここでは、hello-nexttsとする）

こんな感じのディレクトリ構成のプロジェクトができる。

yarncreateコマンド実行直後

生の状態での起動確認

とりあえず

cd hello-nextts
yarn dev

してlocalhost:3000に対してアクセスし、next.jsのトップページがちゃんと起動できることを確かめる。

起動確認

typescriptの初期設定をする

ルートディレクトリに

touch tsconfig.json

を置く。touchしただけなので空ファイル。

yarn add --dev typescript @types/react @types/node
```shell

でtypescriptと@types系をインストールする。

おもむろに

```shell
yarn build

を試してみる。

さっき作ったtsconfig.jsonは空のはずなので動くわけがない。

と思いきや

そのとき不思議なことが起こった

なんと勝手にtsconfig.jsonとかをいい感じにしてくれる。

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