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

More Next.js tasks

Back to the full Next.js cheat sheet