🔧

Next.js 16環境でparams.idが既存の書き方では使えない問題を解決した話

に公開2件
Next.js
frontend
microCMS
エラー解決
App Router
tech

Next.js 16環境でparams.idが既存の書き方では使えない問題を解決した話

背景

簡易的なCMSを作るため microCMS を使って、Next.js App Router で一覧と詳細ページを構築しました。
一覧は /api/v1/‥‥ で正常に取得できるのに、詳細ページ /…/[id] にアクセスすると 404 が返る問題に遭遇しました。

Next.js App Routerでは、app/ ディレクトリ配下にファイルやフォルダを置くことでルートを定義します。
例えば以下のようにすると、一覧ページと詳細ページを作れます。

app/items/page.tsx // 一覧ページ 
app/items/[id]/page.tsx // 詳細ページ（動的ルート）

一覧ページからリンクを貼るときは以下のようにします。

<Link href={`/items/${item.id}`}>詳細を見る</Link>

症状

  • 一覧ページのリンクは正しく /items/${id} に設定済み
  • しかし詳細ページで params.id が undefined になる
  • 結果、API呼び出しが .../items/undefined となり 404

原因

Next.js 15.1.6 以降では params が Promise として渡される仕様に変更されました。
そのため、直接 params.id にアクセスするとエラーや undefined になります。
この仕様は Next.js 16 でも継続しています。

修正前コード

export default async function ItemDetail({ params }: { params: { id: string } }) {
  const id = params.id // ❌ undefinedになる
  const data = await fetchData(id)
  ...
}

修正後コード

export default async function ItemDetail(
  props: { params: Promise<{ id: string }> }
) {
  const { id } = await props.params // ✅ awaitで解決
  const data = await fetchData(id)
  ...
}

学び

  • Next.js 15.1.6 以降では params が Promise として返る
  • Next.js 16 環境でも同じ仕様が適用される
  • props.params を await してから利用するのが安全
  • microCMS 側の公開状態やエンドポイント設定も確認必須

参考にした記事

Discussion