JSTAcademy
0 XP
Dashboard
Crash Courses
Dynamic Routes & Params
10 min
Masters+175 XP
Crash Courses · Masters

Dynamic Routes & Params

Build dynamic pages with route params, catch-all routes, and parallel routes.
10 min read+175 XP on completionCert: Next.js Crash Course
Tap any word in the text below to start reading from there.

Dynamic Routes & Params

Next.js routing supports flexible patterns for blogs, product pages, documentation, and complex UI patterns.

Dynamic Segment

// app/courses/[trackId]/[moduleId]/page.tsx
interface Props {
  params: Promise<{ trackId: string; moduleId: string }>
  searchParams: Promise<{ tab?: string }>
}

export default async function ModulePage({ params, searchParams }: Props) {
  const { trackId, moduleId } = await params
  const { tab = 'content' } = await searchParams

  const course = COURSES.find(c => c.id === moduleId && c.track === trackId)

  if (!course) return notFound()

  return <CourseViewer course={course} activeTab={tab} />
}

notFound() and generateMetadata

import { notFound } from 'next/navigation'
import type { Metadata } from 'next'

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { moduleId } = await params
  const course = COURSES.find(c => c.id === moduleId)

  if (!course) return { title: 'Not Found' }

  return {
    title: course.title + ' | JST Academy',
    description: course.moduleObjective,
  }
}

Catch-All Routes

app/docs/[...slug]/page.tsx  → matches:
  /docs/intro
  /docs/api/courses
  /docs/api/courses/create

app/docs/[[...slug]]/page.tsx → also matches:
  /docs  (slug is undefined)

Parallel Routes (Modal Pattern)

app/
  layout.tsx
  page.tsx
  @modal/           ← parallel slot
    (.)courses/
      [id]/
        page.tsx    ← intercepted modal
  courses/
    [id]/
      page.tsx      ← full page

app/layout.tsx receives { children, modal } — render both simultaneously.

0%