Next.js Dynamic Routing & Metadata

Requirements

Implement a dynamic product details route in Next.js. The path must accept a slug parameter (`/products/[slug]`), load product details asynchronously, and return a dynamic page title matching the product's title.

Expected Output

A Next.js App Router folder structure and layout page utilizing `generateStaticParams` and `generateMetadata` exports.

Hints & Tips

1Implement metadata generation: `export async function generateMetadata({ params })`.
2Implement static bounds generation: `export function generateStaticParams()`.
3Handle missing product records by calling Next.js `notFound()` helpers.

Senior Code Review Checklist

0 / 4 Checked

Common Architectural Mistakes

1Accessing params directly without awaiting them, which breaks rendering in Next.js 15.
2Omitting static path pre-render bindings, forcing slow server-side rendering for static resources.
3Forgetting dynamic SEO titles, hurting page crawlers indexing.

Developer Solution

Click to toggle the recommended code solution

Architectural Explanation

This solution awaits routing variables dynamically, implements metadata mappings, and uses Next.js notFound validations to route users to generic fallback routes when records are missing.

Code Snippet

tsx

import { notFound } from "next/navigation";

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

async function getProduct(slug: string) {
  const products: Record<string, { title: string; desc: string }> = {
    "dev-laptop": { title: "Developer Workstation Pro", desc: "Top-tier specs" }
  };
  return products[slug] || null;
}

export async function generateMetadata({ params }: ProductProps) {
  const { slug } = await params;
  const product = await getProduct(slug);
  return {
    title: product ? `${product.title} | CodeNivra` : "Product Not Found",
  };
}

export default async function ProductPage({ params }: ProductProps) {
  const { slug } = await params;
  const product = await getProduct(slug);

  if (!product) notFound();

  return (
    <div class="p-6">
      <h1 class="text-2xl font-black">{product.title}</h1>
      <p class="text-slate-600 mt-2">{product.desc}</p>
    </div>
  );
}

Explain in Interview

How to pitch this solution during technical interviews

I construct pages using directory param folders. I configure metadata exports through generateMetadata to fetch records before page generation, and pre-compile static assets via generateStaticParams to reduce TTFB metrics.

Loading content…

Requirements

Expected Output

A Next.js App Router folder structure and layout page utilizing `generateStaticParams` and `generateMetadata` exports.

import { notFound } from "next/navigation"; interface ProductProps { params: Promise<{ slug: string }>; } async function getProduct(slug: string) { const products: Record<string, { title: string; desc: string }> = { "dev-laptop": { title: "Developer Workstation Pro", desc: "Top-tier specs" } }; return products[slug] || null; } export async function generateMetadata({ params }: ProductProps) { const { slug } = await params; const product = await getProduct(slug); return { title: product ? `${product.title} | CodeNivra` : "Product Not Found", }; } export default async function ProductPage({ params }: ProductProps) { const { slug } = await params; const product = await getProduct(slug); if (!product) notFound(); return ( <div class="p-6"> <h1 class="text-2xl font-black">{product.title}</h1> <p class="text-slate-600 mt-2">{product.desc}</p> </div> ); }