x app

Layouts

Layouts wrap your pages with shared UI. x supports nested layouts via a dedicated layouts directory and the _layout.tsx convention.

Layouts directory

Configure a layouts directory in x.config.ts. Layouts follow the same file-tree hierarchy as pages.

x.config.ts

import { defineConfig } from "@thexjs/core";export default defineConfig({  pagesDir: "src/pages",  layoutsDir: "src/layouts",});

Root layout

The root layout wraps every page in your app. Create src/layouts/main.tsx to add a header, footer, or global styling.

src/layouts/main.tsx

import type { ReactNode } from "react";export default function RootLayout({ children }: { children: ReactNode }) {  return (    <div className="flex min-h-screen flex-col bg-background">      <header className="border-b border-border p-4">        <a href="/docs" className="text-lg font-bold">My App</a>      </header>      <main className="flex-1">{children}</main>      <footer className="border-t border-border p-4 text-center text-sm text-muted-foreground">        © 2026 My App      </footer>    </div>  );}

Nested layouts with _layout.tsx

Place a _layout.tsx file inside a pages folder to create a nested layout. All pages in that folder (and subfolders) inherit it.

file tree
pages/
_layout.tsx         -> root layout
index.tsx
blog/
    _layout.tsx       -> nested layout for /blog/*
    index.tsx
    [slug].tsx

Nested blog layout example

A nested layout can add a sidebar, breadcrumbs, or section-specific navigation.

src/pages/blog/_layout.tsx

import type { ReactNode } from "react";export default function BlogLayout({ children }: { children: ReactNode }) {  return (    <div className="flex gap-8">      <aside className="w-64 shrink-0">        <nav className="space-y-2">          <a href="/blog" className="block font-semibold">All posts</a>          <a href="/blog/category/react" className="block text-muted-foreground hover:text-foreground">React</a>          <a href="/blog/category/bun" className="block text-muted-foreground hover:text-foreground">Bun</a>        </nav>      </aside>      <div className="min-w-0 flex-1">{children}</div>    </div>  );}

Layout chain

Layouts nest hierarchically. A page under pages/blog/[slug].tsx would be wrapped by blog/_layout.tsx and then the root layout. The chain is resolved automatically based on the page's file path.

Back to docs