【Next.js 15】動的ルーティング設定時に発生したエラーについて

はじめに

Next.jsで個人開発を進めている駆け出しエンジニアです。

開発を進めるにあたって、ページのルーティング設定をはじめにしておこうと思いました。自分が開発しようとしているWebサービスではユーザーにいくつか質問をしてもらう機能があるので、質問ごとにページが変わるようにしたいなと思いました。そこで調べていくと、どうやら「動的ルーティング」がよさそうとのことが判明。

Youtubeで動的ルーティングについて分かりやすく解説してくれている人がいたのでそちらを参考にやってみました。

画面表示まではすんなり行けたのですが、動画内にあるconsole.log(params);で意図した出力がされない。。。
Youtubeで紹介されているコードと同じように書いたのになぜなんだろうと思い調べました。なんとか解決できたので、その原因と解決策について記録しておきます。

参考資料

参考にした動画はこちらです：Next.js Routing Guide
App Routerについて知りたい方：【完全版】App Routerで最初に知っておくとよさそうな基礎を全部まとめてみた

修正前のコード

import React from "react";

const page = ({ params }: { params: { id: string } }) => {
  console.log(params);
  return (
    <div>質問: {params.id}</div>
  );
};

export default page;

エラー

Error: Route "/questions/[id]" used params.id. params should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at id (webpack:///src/app/questions/[id]/page.tsx?6239:6:21)
  4 |     console.log(params);
  5 |   return (
> 6 |     <div>質問: {params.id}</div>
    |                     ^
  7 |   )
  8 | }
  9 |

原因

Next.jsのバージョンが15になってから、paramsの処理が非同期（async）になったため、直接的に値を取得しようとするとエラーが発生するそうです。参考にしたYoutubeの方の解説はNext.js 14で自分のバージョンは15だったので、そこで差が出てました。
Next.js公式ドキュメント：Dynamic APIs are Asynchronous

対策

非同期ということでasyncとawaitを使用することで、paramsのプロパティを利用できるとのこと。

修正後のコード

以下のようにasync関数にし、awaitを使用してparamsのプロパティを取得するように修正しました。

import React from "react";

const page = async ({ params }: { params: { id: string } }) => {
  const { id } = await params;
  console.log({ id });
  return <div>質問: {id}</div>
};

export default page;

気になる点

上記のように修正したところ、VSコードでawaitを記載したところ、注意書きで「awaitはこの式の型に関しては効果がありません」と出ている。
↑実際動いているのでそこまで気にしなくてもいいのか、それとも改善した方がいいのか良く分からない。。。
↑paramsにPromise<...> を付けることで解決しました。

再修正コード

import React from "react";

const page = async ({ params }: { params: Promise<{ id: string }> }) => {
  const { id } = await params;
  console.log({ id });
  return <div>質問: {id}</div>
};

export default page;

詳しくは@honey32さんからコメントいただいていますので、そちらをご確認ください。

最後に

まだ、開発を始めたばかりで難しいなと感じていることが多々あります。
エラーにもビリビリまくりですが、今回は公式ドキュメントを読む→ChatGptに聞いてみる→修正するみたいな感じでやると修正できました。
はじめから生成AIに聞くのもいいですが、公式ドキュメントを読んだ方が最初にAIに聞くより早いなと思いました。
今やっている開発が世に出せるように挫けず頑張っていきたいと思います。応援よろしくお願いします！！