Topic 23 of 47
Page-Based Routing
Overview
In Next.js, folders determine the route path, but a 'page.tsx' (or .js/.jsx) file is required to actually render UI for that path. Without a 'page' file, the route segment doesn't resolve to a webpage.
Syntax
tsx
// app/about/page.tsx
// Maps directly to the URL: yourdomain.com/about
export default function AboutPage() {
return <h1>About Us</h1>;
}
// app/contact/page.tsx
// Maps directly to the URL: yourdomain.com/contact
export default function ContactPage() {
return <h1>Contact Us</h1>;
}Common Pitfalls
- If you create 'app/dashboard/index.tsx', it will NOT work. The filename MUST be 'page.tsx'.
- Page components must be default exports. Named exports for pages will result in an error.
Real-World Example
A nested route structure mapping to a deep URL:
example
tsx
// File path: app/products/categories/electronics/page.tsx
// URL matched: /products/categories/electronics
export default function ElectronicsCategory() {
return (
<main>
<h1>Electronics</h1>
<p>Browse the latest gadgets.</p>
</main>
);
}