Next.jsでプロジェクト生成直後にTypeScript化する
どうも、okarinです。 Next.jsを使う時にデフォルトだとJavaScriptなので変更方法を忘れた時のためのメモです。
そのうちNext.js側で対応しそう
対応していた。。。
公式のGetting Startedを見たら以下のコマンドでよかった
npx create-next-app@latest プロジェクト名 --typescript
プロジェクト名はキャメルケースを許容してないのでそこだけ注意です。
ということで以降の作業は一切無駄になりましたが一応残しておきます。。。
以下コマンドでプロジェクトを生成する。
npm init next-app <プロジェクト名>
生成直後にbuildをしてサーバーを起動する。
next build next start
問題なければ以下のようなページが表示されるはず。
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に変更する
以上で完了