Routing

Overview

TSX and MDX files in src/pages become routes. Routes are static by default.

Route Types

Use TSX for component-heavy pages, dynamic routes, and server routes. Use MDX for prose-heavy pages.

1. TSX pages export a React component from .tsx.
2. MDX pages use Markdown, frontmatter, and a layout.
3. Pages API lets route metadata power indexes, cards, and navigation.

File Mapping

Files map to URLs by their path inside src/pages.

1. src/pages/index.tsx becomes /.
2. src/pages/docs/index.mdx becomes /docs.
3. src/pages/about.tsx becomes /about.
4. src/pages/docs/routing.mdx becomes /docs/routing.

Static Routes

Static routes are rendered during build and deployed as HTML.

Dynamic Routes

A bracket segment becomes a route parameter. Dynamic static routes use TSX and export paths.

Read TSX pages for a full dynamic route example.

Server Routes

Export render = "server" from a TSX route when a page needs request-time data.

Read Page rendering for how static and server routes are rendered, and Deployment before deploying server routes.