Next.js Routing — App Router

Static Routes

A folder with a page.tsx becomes a URL:

app/page.tsx                    →  /
app/about/page.tsx              →  /about
app/blog/page.tsx               →  /blog
app/contact/page.tsx            →  /contact

Nested Routes

app/blog/page.tsx                    →  /blog
app/blog/tech/page.tsx               →  /blog/tech
app/blog/tech/nextjs/page.tsx        →  /blog/tech/nextjs

Every folder adds a URL segment. Nest as deeply as you need.

Dynamic Routes

Square brackets create dynamic segments:

app/posts/[id]/page.tsx         →  /posts/1, /posts/abc, /posts/42

// app/posts/[id]/page.tsx
export default async function Post({ params }) {
    const { id } = await params;
    const post = await getPost(id);
    return <article>{post.title}</article>;
}

Multiple dynamic segments work too:

app/blog/[category]/[slug]/page.tsx
→ /blog/tech/nextjs-routing
→ /blog/news/announcing-v2

Catch-All Routes

app/docs/[...slug]/page.tsx

→ /docs/intro
→ /docs/api/auth
→ /docs/guides/nextjs/routing

// app/docs/[...slug]/page.tsx
export default async function Docs({ params }) {
    const { slug } = await params;
    // slug is an array: ['guides', 'nextjs', 'routing']
}

Use [[...slug]] (double brackets) to also match the base path /docs.

Layouts

A layout.tsx wraps every page in its folder:

// app/layout.tsx — root layout (applies to all pages)
export default function RootLayout({ children }) {
    return (
        <html>
            <body>
                <Navbar />
                {children}
                <Footer />
            </body>
        </html>
    );
}

// app/dashboard/layout.tsx — nested layout for /dashboard
export default function DashboardLayout({ children }) {
    return (
        <div className="flex">
            <Sidebar />
            <main>{children}</main>
        </div>
    );
}

Nested layouts stack — the root layout wraps everything, then the dashboard layout wraps its pages.

Route Groups

Parentheses organise files without adding URL segments:

app/(marketing)/about/page.tsx      →  /about
app/(marketing)/pricing/page.tsx    →  /pricing
app/(shop)/cart/page.tsx            →  /cart
app/(shop)/checkout/page.tsx        →  /checkout

Use groups to give different sections of your site different layouts — marketing pages with a big hero, shop pages with a cart sidebar.

Loading and Error States

Special files show loading and error UI automatically:

app/dashboard/loading.tsx    Loading spinner while page loads
app/dashboard/error.tsx      Error UI if page throws
app/not-found.tsx            Custom 404 page

Example loading.tsx:

export default function Loading() {
    return <div className="p-10">Loading...</div>;
}

Navigation with Link

import Link from 'next/link';

<Link href="/about">About</Link>
<Link href={`/posts/${post.id}`}>{post.title}</Link>

// Programmatic navigation
'use client';
import { useRouter } from 'next/navigation';

const router = useRouter();
router.push('/dashboard');

Always use <Link> instead of <a> for internal links — Next.js prefetches the destination.