When will you use this?

You need this before writing any Next.js code — same as installing Node.js before opening a project.

• Every React/Next.js job expects you to run npx create-next-app and npm run dev on day one.
• Interviewers often ask you to explain the App Router folder structure and Server vs Client Components.

Real-world: NewsDaily portal

The Media team building NewsDaily portal uses Dynamic Routing to show one lesson page per course slug from a single page.tsx template. readers and editors never see the TypeScript files — they just get a fast, reliable article pages, categories, and SEO metadata.

Production-style code

// app/courses/[slug]/page.tsx
type Props = { params: Promise<{ slug: string }> };

export default async function CoursePage({ params }: Props) {
  const { slug } = await params;
  return <h1>Course: {slug}</h1>;
}

What happens in production: In NewsDaily portal, getting Dynamic Routing right means readers and editors trust the article pages, categories, and SEO metadata every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// app/courses/[slug]/page.tsx
type Props = { params: Promise<{ slug: string }> };

export default async function CourseDetailPage({ params }: Props) {
  const { slug } = await params;
  return (
    <main>
      <h1>Course: {slug}</h1>
      <p>Lessons for this course load here.</p>
    </main>
  );
}

Line-by-line walkthrough

How it works (big picture)

• await params unwraps the slug from the URL.
• Later you will fetch course by slug from the database.
• generateStaticParams can pre-build popular courses at deploy time.

Do this on your computer

1. Create app/courses/[slug]/page.tsx
2. Visit /courses/nextjs-fundamentals
3. Log slug in the server console during dev
4. Add a second dynamic segment lessons/[lessonId] under the course folder
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.

Remember

[slug] captures URL segment. await params in modern Next.js. One template serves many courses.

Common questions