ブログをNext.js15系に更新しました！

この記事は？

今から2日前、Next.js15が正式にstableになったとの発表を聞いたので、Next.js14系で運用している著者のブログをcodemodと一部手動での依存関係修復をしてNext.js15系に上げました。

この記事では、簡潔にその記録とNext.js15と今までの差分を振り返ってみましょう。

旧ブログの環境:

-        "next": "14.2.11",
-        "react": "^18",
-        "react-dom": "^18"

新ブログの環境:

+        "next": "15.0.1",
+        "react": "18.3.1",
+        "react-dom": "18.3.1"

codemodsでの更新

Next.jsのバージョンが上がるたびに各所を手動で更新していては手間になってしまいますので、codemodを使うことで選択肢に従って機械的に最新のNext.jsを導入できます。

Next.jsのバージョンアップを行うには以下のコマンドを使用してください。

npx @next/codemod@canary upgrade latest

https://nextjs.org/docs/pages/building-your-application/upgrading/codemods

codemodsの限界

ただ、codemodsに従うだけだと、まだRCであるReact19系が自動でインストールされてしまいましたので、tijuanaが採用しているhtml-react-parserやmantineなど、まだReact19RCに互換性のないライブラリーとの依存関係は解消できません。そこで、

codemodsが導入しようとしたreactおよびreact-domのvについて

-    "next": "15.0.1",
-    "react": "19.0.0-rc-69d4b800-20241021",
-    "react-dom": "19.0.0-rc-69d4b800-20241021"

手動でReactのバージョン部分についてpackage.jsonの書き換えを行う

+        "next": "15.0.1",
+        "react": "18.3.1",
+        "react-dom": "18.3.1"

こうすることで、RCであるReact19系ではなく18系でNext15系を動かすことが可能になります。

Next15の採用について

Next15系ではAPI Routesを動かすためにReact19RCを使いますが、React19RCと互換性がないライブラリーを使っており(tijuanaだと、html-react-parserやmantineなどが該当した。)かつAPI Routesを使いたい場合は、React19RCがGAになってから15系を導入するのがいいでしょう。

https://nextjs.org/blog/next-15

なお、Next15系ではdevのオプションに --turbopackを指定することができるようになり、かつstableになったことで、Nextが新しいバンドラーにturbopackを採用したことは個人的に印象深いことでした。

-    "dev": "next dev",
+    "dev": "next dev --turbopack"

終わりに

著者はNext.js, ServerSide TypeScript, Vercel,AWSなどの標準技術を0-1で導入し、スピーディかつフルスタックな開発、それだけに留まらず開発組織面の帆走まで創業期~拡大期までフェーズ問わず支援させていただいております。単一の言語(TypeScript)でアプリを作るので、最短工数かつエンジニア採用、および長期的な運用保守まで困らない仕事の仕方を手がけています。アプリを一緒に作りたい方/ 興味を持たれた方はご気軽にご連絡ください！では。

※)最近だと生成AIを使っての開発スピードアップや、生成AI APIのアプリへの連携にも興味を持っているので、そういった話に興味がある方とも話してみたいです。

https://tijuana-theta.vercel.app/