Building Your App

Layouts & Pages

Build routes with page files and share UI with nested layouts.

Pages

A page is the default export of a page.tsx file. It renders the UI for a route.

tsx

export default function Page() {
  return <h1>Hello, world</h1>;
}

Layouts

A layout.tsx wraps the pages in its folder and all nested folders. The root app/layout.tsx must render <html> and <body>.

tsx

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        <main>{children}</main>
      </body>
    </html>
  );
}

Dynamic routes

Wrap a folder name in brackets to capture a URL segment. [id] becomes ctx.params.id; [...slug] is a catch-all.