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() 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.