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

Continue with Next.js

Save the full cheat sheet or work through every related task.

More Next.js tasks

Back to the full Next.js cheat sheet