■P294

app/item/[id]/page.js
────────────────
export const generateMetadata = async ({ params }) => {
  const { id } = await params;
  return {
    title: `Item${id}`,
  };
};

import { notFound } from "next/navigation";

const Item = async ({ params }) => {
  const { id } = await params;
  const response = await fetch(`http://localhost:3000/api?id=${id}`);
  if (response.status === 404) {
    notFound();
  }
  const item = await response.json();
  return (
    <div>
      <h2>{item.name}</h2>
      <p>価格: {item.price}円</p>
    </div>
  );
};

export default Item;
────────────────


■P296

app/not-found.js
────────────────
const NotFound = () => {
  return (
    <div>
      <h2>Not Found</h2>
    </div>
  );
};

export default NotFound;
────────────────

