Static vs Dynamic Metadata Generation

1// app/products/[slug]/page.tsx
2import { Metadata } from 'next';
3import { notFound } from 'next/navigation';
4
5interface ProductPageProps {
6  // In Next.js 15+, params is a Promise!
7  params: Promise<{ slug: string }>;
8}
9
10// Automatically called by Next.js to populate <head> tags
11export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
12  const { slug } = await params;
13  
14  // This fetch is automatically deduplicated with the fetch inside the page component!
15  const product = await fetch(`https://api.store.com/products/${slug}`).then(res => res.json());
16
17  if (!product) {
18    return { title: 'Product Not Found' };
19  }
20
21  return {
22    title: product.name,
23    description: product.description.slice(0, 160),
24    openGraph: {
25      title: product.name,
26      description: product.description,
27      images: [{ url: product.featuredImage, width: 1200, height: 630 }],
28    },
29    alternates: {
30      canonical: `/products/${slug}`,
31    },
32  };
33}
34
35export default async function ProductDetailPage({ params }: ProductPageProps) {
36  const { slug } = await params;
37  const product = await fetch(`https://api.store.com/products/${slug}`).then(res => res.json());
38
39  if (!product) notFound();
40
41  return <div><h1>{product.name}</h1></div>;
42}