page.tsx and layout.tsx

8 min read

The Two Most Important Files

page.tsx exports a default React component that renders the UI for a route. layout.tsx exports a component that wraps its route segment and all child segments. The root layout at src/app/layout.tsx must include <html> and <body> tags and is rendered on every single page.

tsx

// src/app/layout.tsx
import type { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

tsx

// src/app/about/page.tsx
export default function AboutPage() {
  return <main><h1>About Us</h1></main>;
}

Layouts are persistent — they do not remount when navigating between child routes. This means scroll position and component state inside a layout survive navigation, which is perfect for sidebars and headers.

Every page and layout is a Server Component by default. You only reach for "use client" when you need interactivity, browser APIs, or React hooks.

Ready to test yourself?

Practice Next.js— quiz & coding exercises