Basic routing in Next.js
From the Next.js cheat sheet · Routing & Navigation · verified Jul 2026
Basic routing
typescript
// app/page.tsx - Home route (/)
export default function HomePage() {
return <h1>Home Page</h1>
}
// app/about/page.tsx - About route (/about)
export default function AboutPage() {
return <h1>About Page</h1>
}
// app/(marketing)/contact/page.tsx - Route group
// URL is /contact (marketing is ignored)
export default function ContactPage() {
return <h1>Contact Page</h1>
}💡 Folders define routes, page.tsx makes them accessible
⚡ Nested folders create nested routes
📌 Use Link component for client-side navigation
🔥 Route groups with () don't affect URL