Layouts

Creating layouts

While not required, for most projects it makes sense to create a site layout that all of your pages can extend. You may have noticed in our page example above that we're wrapping the page content within a <Layout> component. Here's an example of such a component:

import { Link, type LayoutProps } from '@inertiajs-revamped/preact'

export default function Layout({ children }: LayoutProps) {
  return (
    <main>
      <header>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Link href="/contact">Contact</Link>
      </header>
      <article>{children}</article>
    </main>
  )
}

As you can see, there is nothing Inertia specific within this template. This is just a typical Preact component.