😘

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

2 min read

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

どうも、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 でインストールしておく

手順概要

  1. create-react-appでnext.jsプロジェクトを作成
  2. 生の状態での起動確認
  3. typescriptの初期設定をする
  4. 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"
  ]
}

シンギュラリティだ。

pages/以下の.jsファイルをtsxファイルにリネーム

拡張子を変えるだけでok。

rename

実際にyarn devしてみると問題なく動く。

index.tsxのh1タグのテキストを変えてみると...

altertext

done

更新が反映された。

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

参考

公式

https://nextjs.org/

書籍
実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~