書籍どおりなのにコードが動かない

Next.jsとmicroCMSを使ったWebサイト制作を勉強するために、 書籍のサンプルコードを見ながら記事詳細ページを作っていました。

フォルダを作り、書籍に書かれているコードを入力して、 ブラウザーで記事ページを開いてみます。

ところが、画面には期待していた記事が表示されず、 ターミナルやエディターには paramsに関するエラーが表示されました。

コードを何度見直しても、書籍の内容と大きな違いはありません。

そこでNext.jsの現在の仕様を調べたところ、 原因は入力ミスではなく、 書籍と現在のNext.jsとのバージョン差にありました。

今回問題になったのは、 App Routerの動的ルートで使用する paramsの扱い方です。

そもそもparamsとは？

paramsは、URLの一部から値を受け取るために使います。

例えば、microCMSで作ったブログに、 次のような記事詳細ページがあるとします。

このURLでは、最後の html-and-tsxが記事を識別するための値です。

Next.jsのApp Routerでは、角括弧を使ったフォルダを作ることで、 URLによって内容が変わる動的ルートを作れます。

src
└── app
    └── blog
        └── [slug]
            └── page.tsx

[slug]の部分には、 実際のURLに含まれる値が入ります。

Next.jsで何が変わったの？

Next.js 14以前では、 ページに渡されたparamsを 通常のオブジェクトとして直接使用できました。

type Props = {
  params: {
    slug: string;
  };
};

export default function Page({ params }: Props) {
  const slug = params.slug;

  return <p>{slug}</p>;
}

この書き方では、paramsを受け取ったあと、 すぐにparams.slugへアクセスしています。

一方、現在のNext.jsでは、 paramsはPromiseとしてページへ渡されます。

type Props = {
  params: Promise<{
    slug: string;
  }>;
};

export default async function Page({
  params,
}: Props) {
  const { slug } = await params;

  return <p>{slug}</p>;
}

つまり、大きな変更点は次の3つです。

• paramsの型を Promise<...>にする
• ページ関数にasyncを付ける
• await paramsで値を取り出す

Promiseとは？初心者向けにやさしく整理

paramsがPromiseになったと聞いても、 JavaScriptやTypeScriptを学び始めたばかりだと、 何が変わったのか分かりにくいかもしれません。

Promiseは簡単にいうと、 あとで受け取れる値を表す仕組みです。

例えば、次のコードでは getMessage()からPromiseが返ってきます。

async function getMessage() {
  return "こんにちは";
}

async function showMessage() {
  const message = await getMessage();

  console.log(message);
}

awaitを付けることで、 Promiseの中から実際の値である 「こんにちは」を取り出しています。

paramsについても考え方は同じです。

const resolvedParams = await params;
const slug = resolvedParams.slug;

分割代入を使うと、これを一行で書けます。

const { slug } = await params;

なぜawait paramsが必要なの？

Promiseの状態で渡されたparamsは、 そのままでは通常のオブジェクトと同じように扱えません。

そのため、次のように直接プロパティへアクセスするのではなく、 先にPromiseを解決する必要があります。

const slug = params.slug;

const { slug } = await params;

awaitを使う関数には、 原則としてasyncを付けます。

export default async function Page({
  params,
}: Props) {
  const { slug } = await params;

  return <p>{slug}</p>;
}

書籍のコードを修正前・修正後で比較

実際にどこを変更すればよいのか、 記事詳細ページのコード全体で比較します。

修正前：paramsを同期オブジェクトとして扱う

type Props = {
  params: {
    slug: string;
  };
};

export default function BlogDetailPage({
  params,
}: Props) {
  return (
    <main>
      <h1>記事詳細ページ</h1>
      <p>記事ID：{params.slug}</p>
    </main>
  );
}

修正後：paramsをPromiseとして扱う

type Props = {
  params: Promise<{
    slug: string;
  }>;
};

export default async function BlogDetailPage({
  params,
}: Props) {
  const { slug } = await params;

  return (
    <main>
      <h1>記事詳細ページ</h1>
      <p>記事ID：{slug}</p>
    </main>
  );
}

microCMSの記事詳細ページで使う例

microCMSの記事詳細ページでは、 URLから受け取ったslugや コンテンツIDを使って記事データを取得します。

ここでは、URLの値をmicroCMSのコンテンツIDとして使用する例を見てみます。

src
├── app
│   └── blog
│       └── [id]
│           └── page.tsx
└── libs
    └── microcms.ts

microCMSから記事を取得する関数

import { createClient } from "microcms-js-sdk";

export type Blog = {
  id: string;
  title: string;
  content: string;
};

const client = createClient({
  serviceDomain:
    process.env.MICROCMS_SERVICE_DOMAIN!,
  apiKey:
    process.env.MICROCMS_API_KEY!,
});

export const getBlogDetail = async (
  contentId: string
) => {
  return client.getListDetail<Blog>({
    endpoint: "blogs",
    contentId,
  });
};

paramsからIDを取得してAPIへ渡す

import { getBlogDetail } from "@/libs/microcms";

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

export default async function BlogDetailPage({
  params,
}: Props) {
  const { id } = await params;
  const article = await getBlogDetail(id);

  return (
    <main>
      <h1>{article.title}</h1>

      <div
        dangerouslySetInnerHTML={{
          __html: article.content,
        }}
      />
    </main>
  );
}

このコードで重要なのは、 microCMSへIDを渡す前に await paramsを実行していることです。

generateMetadataでも同じ対応が必要

記事ごとにページタイトルや説明文を変える場合、 Next.jsのgenerateMetadataを使用できます。

この関数でparamsを使う場合も、 Promiseとして受け取り、awaitする必要があります。

import type { Metadata } from "next";
import { getBlogDetail } from "@/libs/microcms";

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

export async function generateMetadata({
  params,
}: Props): Promise<Metadata> {
  const { id } = await params;
  const article = await getBlogDetail(id);

  return {
    title: article.title,
    description:
      `${article.title}の記事詳細ページです。`,
  };
}

export default async function BlogDetailPage({
  params,
}: Props) {
  const { id } = await params;
  const article = await getBlogDetail(id);

  return (
    <main>
      <h1>{article.title}</h1>
    </main>
  );
}

ページ本体だけを修正しても、 generateMetadata側で古い書き方が残っていると、 別の場所でエラーになる可能性があります。

• page.tsxのページ関数
• layout.tsxのレイアウト関数
• generateMetadata
• Route Handlerで動的ルートを使っている箇所

Client Componentではどうするの？

ここまで紹介したのは、 App RouterのServer Componentで paramsを受け取る書き方です。

Client Componentで現在の動的ルートを読みたい場合は、 useParamsを使用する方法があります。

"use client";

import { useParams } from "next/navigation";

export default function CurrentArticleId() {
  const params = useParams<{
    id: string;
  }>();

  return (
    <p>
      現在の記事ID：{params.id}
    </p>
  );
}

microCMSから記事を取得してページを表示するだけであれば、 基本的にはServer Component側で await paramsを使う形が分かりやすいです。

修正しても動かないときの確認ポイント

await paramsへ修正してもエラーが残る場合は、 次の項目を確認します。

export default async function Page() {
  // awaitを使用できます
}

params: Promise<{
  slug: string;
}>;

const { slug } = await params;

// フォルダ：app/blog/[id]/page.tsx

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

npm run dev

書籍が間違っているわけではない

書籍のサンプルコードが現在の環境で動かないと、 「本の内容が間違っているのでは？」と思ってしまうかもしれません。

しかし、技術書は執筆時点や検証時点のバージョンをもとに作られています。

Next.jsのように更新が続くフレームワークでは、 書籍の発売後に仕様が変わることがあります。

ページ構成やmicroCMSとの連携方法など、 書籍から学べる基本的な考え方はそのまま活用できます。

動かない部分だけを現在の仕様に合わせて修正することで、 書籍を学習教材として引き続き利用できます。