Q1: How does file-based routing work in the Pages Router?
In the Pages Router, every file inside the pages/ directory automatically maps to a public URL route based on its filename. Files like pages/index.js map to /, pages/about.js maps to /about, and nested directories like pages/blog/first-post.js map to /blog/first-post.
Basic Pages Route Definition
// pages/contact.js -> Maps to /contact
export default function Contact() {
return <h1>Contact Us</h1>;
}💡 Exporting a React component as default from a file in pages/ instantly registers the route.
Key Takeaways
- Files inside
pages/directly map to URL endpoints. index.jsserves as the root file for any directory.
Knowledge Check
What is the corresponding URL for a file located at pages/dashboard/settings.js?