1 · Structure and rendering · 30 MIN

Dynamic routes and missing resources

A URL parameter identifies a resource but does not prove it exists.

The [slug] folder matches dynamic path segments. In Next.js 15, page params can be awaited as a promise. Resolve the slug against a trusted dataset and call notFound when no matching published course exists. Do not render a successful empty page for an unknown resource: users and search engines need the appropriate missing-page behavior. If data belongs to an account, resolving its ID also requires an ownership check on the server. A guessed identifier must never establish authorization.

Verify the valid direct URL.

Read the example

// app/courses/[slug]/page.tsx
import {notFound} from 'next/navigation';
const courses=[{slug:'react',title:'React foundations',summary:'Components, props and state.'}];
export default async function Page({params}:{params:Promise<{slug:string}>}) {
  const {slug}=await params;
  const course=courses.find(c=>c.slug===slug);
  if(!course)notFound();
  return <main><h1>{course.title}</h1><p>{course.summary}</p></main>;
}

/courses/react renders the course; /courses/unknown reaches the not-found UI.

Your challenge

Add a second course and generateStaticParams for the known public slugs; preserve unknown-resource handling.

Solution cost: O(n) lookup in this teaching array; indexed database lookup differs. time · O(1) extra lookup state. space

Common trap

A dynamic route match does not mean a database record exists.

// app/courses/[slug]/page.tsx
import {notFound} from 'next/navigation';
const courses=[{slug:'react',title:'React foundations',summary:'Components, props and state.'}];
export default async function Page({params}:{params:Promise<{slug:string}>}) {
  const {slug}=await params;
  const course=courses.find(c=>c.slug===slug);
  if(!course)notFound();
  return <main><h1>{course.title}</h1><p>{course.summary}</p></main>;
}

Further reading: Official documentation