Next.js Routes

Creating Your First Routes

To add a new route, create a folder inside app/ matching the URL segment you want, then add a page.tsx file inside it exporting a default React component. There is no route configuration file to edit and no router library to register the path with — the folder's existence and its page.tsx file are the registration.

The root route (/) is the one exception: it maps directly to app/page.tsx, with no folder needed beyond app/ itself.

app/
  page.tsx           // /
  about/
    page.tsx         // /about
  contact/
    page.tsx         // /contact

Three folders (well, app/ itself plus two subfolders) define three complete routes with zero router configuration.

Anatomy of a Route File

// app/about/page.tsx
export default function AboutPage() {
  return <h1>About Us</h1>;
}

• A route file must have a default export that returns valid JSX.
• The component name (AboutPage here) can be anything; only the default export and file location matter.
• Route components can be async since they are Server Components by default.
• Metadata (title, description) can be exported alongside the component using the Metadata API.

Routes Cheat Sheet

How common folder structures map to URLs.

Index Routes at Every Level

Just like the root app/page.tsx handles /, any folder can have its own page.tsx to handle that exact segment path, independent of whatever nested routes exist beneath it. app/blog/page.tsx handles /blog even if app/blog/[slug]/page.tsx also exists for individual posts.

app/
  blog/
    page.tsx          // /blog (e.g. a list of posts)
    [slug]/
      page.tsx        // /blog/:slug (an individual post)

Both routes can coexist and are independent — visiting /blog never renders the [slug] page.

Adding Metadata to a Route

Every route can export a metadata object (or a generateMetadata function for dynamic values) to control the page's <title>, description, and other SEO tags. The full Metadata API is covered in a dedicated lesson later in this course.

// app/about/page.tsx
export const metadata = {
  title: "About Us",
  description: "Learn more about our company.",
};

export default function AboutPage() {
  return <h1>About Us</h1>;
}

Common Mistakes

• Creating a folder without a page.tsx and being confused why the route 404s.
• Naming the route file Page.tsx or index.tsx instead of the required exact name page.tsx.
• Forgetting that folder names are case-sensitive on most deployment platforms, even if your local OS isn't.
• Not adding a default export, or exporting the component as a named export only.

Key Takeaways

• A route is a folder in app/ containing a page.tsx file with a default-exported component.
• app/page.tsx maps to /; nested folders build up deeper URL paths.
• A folder can have both its own page.tsx and nested routes beneath it, independently.
• Route components can be async and can export a metadata object for SEO.
• There is no separate router configuration file — the file system is the router.