ブログ

Next.js16に更新する。

https://nextjs.org/docs/app/guides/upgrading/version-16

AIエージェントを使う方法を試す。

まずgeminiにNext.js DevTools MCPを登録。

gemini mcp add next-devtools npx next-devtools-mcp@latest

geminiを起動してプロンプトを実行する。

Next Devtools, help me upgrade my Next.js app to version 16

「Executing the Codemod」でやたら時間がかかる。

@next/codemod@canary upgrade が対話式なせいで動いてない？

諦めて手動で実行する。

npx @next/codemod@canary upgrade latest

変更項目が一覧で出るので全て選択して実行。

いまいちよくわかってないが package.json を見ると 16.0.1 になっていた。

npm run dev を実行するとメッセージが出る。

 ✓ Starting...

   We detected TypeScript in your project and reconfigured your tsconfig.json file for you.
   The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:

   	- include was updated to add '.next/dev/types/**/*.ts'

   The following mandatory changes were made to your tsconfig.json:

   	- jsx was set to react-jsx (next.js uses the React automatic runtime)

 ✓ Ready in 1462ms

tsconfig.json に変更が加えられる。

• "jsx" が "preserve" から "react-jsx" に変更
• "include" に ".next/dev/types/**/*.ts" が追加

"jsx" はTypeScriptからJavaScriptに変換する際にJSX部分をどのようにコンパイルするかを指定するオプション。

https://www.typescriptlang.org/tsconfig/#jsx

"preserve" はJSXに変更を加えず .jsx ファイルとして出力する。

"react-jsx" はJSXを _jsx 呼び出しに変更して .js ファイルとして出力する。

"include" はコンパイル対象ファイルの指定。

https://www.typescriptlang.org/tsconfig/#include

Next.js16で npm run dev と npm run build で出力先のディレクトリが分けられたようなのでおそらくそれ用の設定。

Dev and build output directories
next dev and next build now use separate output directories, enabling concurrent execution
https://nextjs.org/docs/app/guides/upgrading/version-16