Okarin note

頭の整理もかねて色々と書いていきます

Next.jsでプロジェクト生成直後にTypeScript化する

どうも、okarinです。 Next.jsを使う時にデフォルトだとJavaScriptなので変更方法を忘れた時のためのメモです。

そのうちNext.js側で対応しそう

対応していた。。。

公式のGetting Startedを見たら以下のコマンドでよかった

nextjs.org

npx create-next-app@latest プロジェクト名 --typescript

プロジェクト名はキャメルケースを許容してないのでそこだけ注意です。
ということで以降の作業は一切無駄になりましたが一応残しておきます。。。

以下コマンドでプロジェクトを生成する。

npm init next-app <プロジェクト名>

生成直後にbuildをしてサーバーを起動する。

next build

next start

問題なければ以下のようなページが表示されるはず。

f:id:SazanamiN:20211222223140p:plain

tsconfig.json のファイルを空で作成する。

touch tsconfig.json

ファイルの作成後に再度、ビルドをする。

このタイミングで空のtsconfig.jsonに自動で中身が書き込まれる!

(めちゃくちゃすごい。。。

next build

自動生成されたtsconfig.jsの中身

{
  "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に変更する

以上で完了