Getting Started

File-Based Routing

Understand how Next.js creates routes from your file structure — no router configuration needed.

How Routing Works

In the App Router, the folder structure inside app/ defines your routes:

Folder structureURL
app/page.tsx/
app/about/page.tsx/about
app/blog/[slug]/page.tsx/blog/:slug
app/shop/[...categories]/page.tsx/shop/a/b/c

Special Files

  • page.tsx — defines a route segment's UI
  • layout.tsx — wraps pages with shared UI
  • loading.tsx — streaming loading UI
  • error.tsx — error boundary
  • not-found.tsx — 404 page
  • route.ts — API endpoint

Navigation

Use the <Link> component from next/link for client-side navigation.

Example

jsx
// app/blog/[slug]/page.tsx
// Handles /blog/my-post, /blog/another-post, etc.

type Props = {
  params: { slug: string };
  searchParams: { [key: string]: string };
};

export default async function BlogPost({ params }: Props) {
  // params.slug is the dynamic segment
  const post = await fetchPost(params.slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// Generate static paths at build time
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}

// app/layout.tsx with navigation
import Link from 'next/link';

export default function Layout({ children }) {
  return (
    <>
      <nav>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Link href="/blog">Blog</Link>
      </nav>
      {children}
    </>
  );
}
Try it yourself — JSX