File-based Routing

Next.js uses a file-system based router. Files in the app directory automatically become routes. A page.tsx file in a folder creates a route at that URL path.

Example

// app/page.tsx — routes to /
export default function HomePage() {
  return <h1>Home</h1>
}

// app/about/page.tsx — routes to /about
export default function AboutPage() {
  return <h1>About Us</h1>
}

// app/blog/[slug]/page.tsx — dynamic routes
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>Post: {params.slug}</h1>
}

// app/layout.tsx — wraps all pages
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav>Navigation here</nav>
        <main>{children}</main>
      </body>
    </html>
  )
}

HTML

Full Editor

Related Resources

Next.js Reference

Complete tag & property list

Next.js How-To Guides

Step-by-step practical guides

Next.js Exercises

Practice what you've learned