🔁

【Next.js】Next.js 15以降の動的ルートでは、paramsがPromiseになっていることに注意

に公開
Next.js
React
TypeScript
tech

はじめに

以前Next.jsの動的ルーティングを記事にしたのですが、
Next.js 15（App Router）以降での動的ルーティングは、params が Promise になっていたので、最低限おさえておきたいポイントをメモしておきます。

Next.js 15以降 の動的ルーティング コード例

// app/posts/[id]/page.tsx

type Props = {
  params: Promise<{ id: string }>
}

export default async function Page({ params }: Props) {
  const { id } = await params
  return <div>Post ID: {id}</div>
}

このファイルは例えばapp/posts/[id]/page.tsxという場所に置かれた、動的ルートのページコンポーネントを想定しています。
/posts/1 にアクセスすると、id は "1" になります。

ここだけ分かればOKポイント

1. params は Promise になった

type Props = {
  params: Promise<{ id: string }>
}
  • 以前：params: { id: string }
  • 今回：params: Promise<{ id: string }>
    ⭐️「URLパラメータが、非同期で渡されるようになった」 ぐらいの理解でOKです。

2. Page は async になり、await params する

export default async function Page({ params }: Props) {
  const { id } = await params
  return <div>Post ID: {id}</div>
}

params の中身（{ id: string }）を取り出すために、

  1. コンポーネントを async function にする
  2. await params で中身を待つ
  3. 分割代入で id を取り出す

という流れになっています。

書き換えるとこうです：

export default async function Page({ params }: Props) {
  const resolvedParams = await params  // { id: string }
  const id = resolvedParams.id
  return <div>Post ID: {id}</div>
}

これを1行に縮めたのが

const { id } = await params

という書き方です。

以前とのざっくり比較

  • 〜14 までのイメージ
type Props = {
  params: { id: string }
}

export default function Page({ params }: Props) {
  return <div>Post ID: {params.id}</div>
}
  • 15 以降のイメージ
type Props = {
  params: Promise<{ id: string }>
}

export default async function Page({ params }: Props) {
  const { id } = await params
  return <div>Post ID: {id}</div>
}

まとめ

  • Next.js 15以降 では、動的ルートの params が Promise になった
  • 型は params: Promise<{ id: string }> のように書く
  • 中身を使うときは async コンポーネントにして const { id } = await params とする

「params をもらって await する」という型と書き方だけ覚えておけば、
あとは今まで通り、id を使ってデータ取得や画面表示ができます✨

GitHubで編集を提案

Discussion