【Web】Next.jsを使用した動的ルーティング設定時に発生したエラーの解消方法まとめ

はじめに

今年から新たに弊社関連会社の新システム作成でNext.jsを使用し、開発を進めています。
Web自体もかなり久々で、思い出しながら手探りで実装を進めているのですがその際非同期処理関連でエラーが出ていたので対応しました。

出ていたエラーは以下になります。

Error: Route /sample/[id] used params.id . params should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis 

今回はこのエラーを解消した方法を備忘録的にまとめておこうと思います。

解消方法

このエラーですが、どうやらNext.jsのバージョン15より、動的なパラメータに関する処理が非同期になった為直接値を取得しようとするとエラーが発生するようですね。
その為パラメータを取得する際にはPromiseとawaitを付与してあげることで解消可能です。

page.tsx

// 修正前
export default async function PostPage(params: {id: string}) {
  const { id } = params;
  console.log({ id });
}

// 修正後
export default async function PostPage(params: Promise<{id: string}>) {
  const { id } = await params;
  console.log({ id });
}

以上になります。

さいごに

Webは何かと専門用語が多いなと感じますが、すごい技術的な進歩を感じますね。
やはりこういった右も左も分からない新しい領域で緊張しながら手を動かすとゾクゾクしますね、自分で言うのもなんですが変態かもしれません(笑)