Next.js(create-next-app) 10.2.1からTypeScriptを利用したブートストラップがちょっとわかりやすくなる

v10.2.1はまだ正式リリースされていません(2021/5/17現在)が、v10.2.1-canary.3からcreate-next-appコマンドに--tsオプションが追加されました。

npx -y create-next-app@10.2.1-canary.8 helloworld-ts --use-npm --ts 

試しに10.2.1-canary.8で--tsを利用してブートストラップしてみると

ページコンポーネントが最初からtsx、APIはtsで生成され

package.json

  "devDependencies": {
    "@types/next": "9.0.0",
    "@types/react": "17.0.5",
    "error": "10.4.0",
    "typescript": "4.2.4"
  }

devDependenciesには型定義やtsが追加され

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "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"]
}

tsconfig.jsonもちゃんと生成されます。

strictがちゃんとtrueなのも良いですね。もともとcreate-next-app -e with-typescriptでexamplesから引っ張ってくる事でも似たような事は出来ていたんですが、一級市民としてのTSの地位がより強まったという感じでしょうか。

現状、create-next-app -e blog --tsのようにexamplesと組合せた使い方は出来ないので、そもそもデフォルトをtsとして--tsオプションではなく--without-tsオプションになってほしいというのがTypeScript好きとしては正直なところなのだけれど、そこまで行ったらNext.jsじゃなくてNext.tsになってしまうので無いだろうなまる