【Next.js DevTools MCP】Next.jsをv15からv16にアップグレードした時にやったこと
Next.jsをアップグレードしたい！
Next.jsのバージョンが古かったので最新版にアップグレードしたいなと思っていました。
とはいえ、アップグレード作業って結構大変だよなあ、しかもメジャーバージョンだしなあと二の足を踏んでいました。そんな折、12月に入ってから立て続けに脆弱性が報告されるようになってからこうしてはいられないと重い腰を上げました。
公式のガイドを読む
まずは公式を読もうということでアップグレードに関するガイドを読んでみました。
ここに、こんな文言があります。
If you're using an AI coding assistant that supports the Model Context Protocol (MCP), you can use the Next.js DevTools MCP to automate the upgrade process and migration tasks.
どうやら、Next.js DevTools MCPを使うことでアップグレードの自動化をやるよ！とのことらしいです。気になったので早速使ってみることにしました。
MCPの設定をする
ここも公式に沿って作業します。普段使っているAI coding assistantに設定を記述しましょう。私の場合はCursorで設定したのでSettings... > Cursor settings > Tools & MCP > New MCP Serverの順で進んだ先で以下のjsonを追記しました。
{
"mcpServers": {
"next-devtools": {
"command": "npx",
"args": ["-y", "next-devtools-mcp@latest"]
}
}
}
準備完了です。Next.js DevTools MCPを使っていきましょう。
実際にやってみる
ここも公式に沿ってやってみます。
以下のようにAgentモードで指示を出しました。
Next Devtools, help me upgrade my Next.js app to version 16
作業内容を把握するため、作業した内容をレポートにしてねとついでに指示を出しておきました。
実際に私がやったのはここまでです。 あとはお茶でも啜りながら待ちましょう。
お茶を飲みながら、実際にやるとしたら何をしないといけないのかを公式ガイドを読みながらインプットします。以下のセクションは、AIが実際に実行していた内容です。
Codemodsを使う
Codemods are transformations that run on your codebase programmatically. This allows a large number of changes to be programmatically applied without having to manually go through every file.
Next.js provides Codemod transformations to help upgrade your Next.js codebase when an API is updated or deprecated.
Next.jsをアップグレードする上で便利なものとしてCodemodsがあります。
これを使うと、APIが更新、あるいは非推奨になった際にアップグレードをサポートしてくれます。
next.config.tsの手動変更
画像設定が非推奨のものになっていたので修正してくれていました。
images.domainsの設定がdeprecatedになっていました。
package.jsonの変更
Next.js 16からnext lintの動作が変更になりました。
直接ESLintを使う必要があります。
ちなみにガイドを読んでみると
The next lint command has been removed. Use Biome or ESLint directly. next build no longer runs linting.
Biomeを推してるっぽいです。これを機に使用してみようかなと思いました。
あとは細々した修正が入っていました。ここまでほぼ何もしてないので若干不安すらありましたが、完了したのでビルド、型チェック、Lintを走らせるなどして問題がないか確認します。
ここまで問題なければ、実際に動作確認をローカルや検証環境で行い、本番環境にデプロイして完了です🚀
まとめ
元々Next.jsはCodemodsのおかげでアップグレードが容易なフレームワークですが、Next.js DevTools MCPの登場によって、そのハードルがさらに下がったと感じます。
とはいえ、すべてをAI任せにしてブラックボックス化するのではなく、公式ガイドで知識を補完しつつ、最終的には自分の目で確かめながら進めるのがベストです。そうすることで、より安全かつスピーディーに作業を進められると思います。
これからも変化していくNext.jsを楽しんでいきましょう！
参考リンク
Discussion