【Next.js】Next.jsのバージョン15へのアップデート方法

はじめに
アップデート方法
おわりに

はじめに

こんにちは、株式会社TOKOSのツキヤです！
先日(2024年10月末頃)、Next.jsのバージョン15がリリースされましたね！

本記事ではNext.jsのバージョン14から15のアップデート方法を記載し、気をつけるポイント等もまとめていきます💪

アップデート方法

codemodの実行

早速アップデートを行っていきます！
と言いましたが、実は下記コマンド1つでアップデート作業はほとんど完了してしまいます✨

ターミナル

npx @next/codemod@15.0.3 upgrade latest

上記コマンドを実行することで、Next.jsのバージョン「15.0.3」にアップデートするために必要な変更を対話形式で進めていきます！

まずはcodemodを(一時的に)インストールして良いかを聞かれているので、「y」で進めます！

Turbopackの使用

現在のReact及びNext.jsのバージョンが表示された上で、何やらWarningが出ていますね、、!
こちらに関しては、僕がpackage.json内scriptsのdevのコマンドををnext -p 8000に変更しているために起きていそうです！
一旦このままのコマンドで行きたいので何も入力せずにEnterで進めます。

実際には、Next.js 15 からは開発環境でのTurbopackの使用が安定版となったため、そちらのコマンドを入れることを促すような対話になっていそうですね！
Turbopackを使用したい方はnext dev --turboというコマンドに変更してしまいましょう！

ツキヤ

僕がコマンドをnext -p 8000にしている理由は、localhostで確認するポートを8000番に変更したいからです！

ソースコードの自動書き換え

次に、自動でソースコードを書き換えてる対象を選択します！
何やら3種類有りそうですね！

1つ目は、バージョン14では試験的な機能であったAPI Routeのedge設定「experimental-edge」を「edge」に変更するかどうからしいです！
自分は記述をしていないのでどちらでも良かったのですが、チェックは入れたままにします！

2つ目は、page.tsxがpropsとして受け取るRequest APIsが非同期になったので、それの自動書き換えを行ってくれるかどうかですね！
こちらはほとんどの人が関係あると思うので少し解説します。

バージョン14までは、下記コードのようにpage.tsxがpropsとして受け取るパスパラメータはクエリパラメータはそのまま使うことができていました！

以前のpage.tsx(ex.users/[id]/page.tsx)

export default async function UserDetailPage({
  params,
}: {
  params: { id: string }
}) {
  const { id } = params
  
  return (
    <h1>ユーザーののIDは{id}です！</h1>
  )
}

ですが、バージョン15では上記が非同期となるので下記のように書き換える必要があります！

バージョン15でのpage.tsx(ex.users/[id]/page.tsx)

export default async function UserDetailPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  
  return (
    <h1>ユーザーののIDは{id}です！</h1>
  )
}