Layouts, Error, and Not Found Pages

Layouts (layout.tsx)

Layouts wrap pages and child layouts. They persist across navigation, preserving state and preventing unnecessary re-renders.

A layout receives children, params, and any parallel slots (e.g., sidebar) as props. Note: searchParams are not passed to layouts.

// src/dashboard/layout.tsx
export default async function Layout({ children, params, sidebar }) {
  return (
    <div className="dashboard-grid">
      <aside>{sidebar}</aside>
      <main>
        <h1>Dashboard for {params.teamId}</h1>
        {children}
      </main>
    </div>
  );
}

Layouts are nested by default. For example, a page at src/dashboard/settings/page.tsx would be wrapped by the root layout (src/layout.tsx) if exists and the dashboard layout (src/dashboard/layout.tsx).

Error Handling (error.tsx)

Define an error.tsx file to handle errors in a route segment. Dinou renders the closest error.tsx bubbling up the hierarchy.

It receives error (object) and params as props. Error pages can be Server or Client Components.

// src/some/route/[slug]/error.tsx
"use client"; // Optional: Can be Server Component too

export default function Page({ error, params }) {
  return (
    <div>
      <h2>Something went wrong in {params.slug}!</h2>
      <p>{`${error.name}: ${error.message}`}</p>
      {error.stack && (
        <pre style={{ background: "#eee", padding: "1rem" }}>{error.stack}</pre>
      )}
    </div>
  );
}

Not Found (not_found.tsx)

Define a not_found.tsx file to customize the 404 UI. Dinou renders the closest not_found.tsx traversing up from the requested URL.

It receives params as a prop. Use useSearchParams() in Client Components, or getContext().req.query in Server Components for search parameters.

Advanced Layout Control (Flags)

Use empty "flag files" (no extension) to control layout behavior, such as breaking out of the nested hierarchy.