nextjs-routing

Next.js Routing Patterns

App Router is file-based: folders are routes, page.tsx is the page UI. This skill covers the routing primitives beyond plain pages.

Dynamic segments

app/users/[id]/page.tsx                → /users/:id          → params.id: string
app/posts/[slug]/page.tsx              → /posts/:slug        → params.slug: string
app/docs/[...path]/page.tsx            → /docs/a/b/c          → params.path: string[]
app/optional/[[...path]]/page.tsx      → /optional AND /optional/a/b → params.path: string[] | undefined

In Next.js 15+, params is a Promise:

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  // ...
}

In Next.js 14 and earlier, params is a plain object — no await needed.

Route groups (organizational)

Folders in parens — DON'T appear in URL but allow:

• Different layouts for different sections.
• Logical organization without nested URLs.

app/(marketing)/about/page.tsx         → /about
app/(marketing)/pricing/page.tsx       → /pricing
app/(marketing)/layout.tsx             → applies to /about and /pricing

app/(app)/dashboard/page.tsx           → /dashboard
app/(app)/settings/page.tsx            → /settings
app/(app)/layout.tsx                   → applies to /dashboard and /settings

/about doesn't get the /(app)/ layout, even though they share app/'s root layout.

Parallel routes

Render two segments simultaneously in one layout — for dashboards, modal overlays, side panels.

app/dashboard/layout.tsx
app/dashboard/@analytics/page.tsx       → renders into {analytics} slot
app/dashboard/@team/page.tsx            → renders into {team} slot
app/dashboard/page.tsx                  → renders into {children} slot

The layout receives all slots:

// app/dashboard/layout.tsx
export default function Layout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <div>
      <main>{children}</main>
      <aside>{analytics}</aside>
      <aside>{team}</aside>
    </div>
  );
}