adonis-kit registry

react-layouts showcase-server

Server entry demo for @adonis-kit/react-layouts/server.

Composition Order

withServerLayouts uses inside-out composition; array tail is outermost layout.

withServerLayouts(Page, [Layout1, Layout2])

<Layout2>
  <Layout1>
    <Page />
  </Layout1>
</Layout2>

Runtime Demo

This section renders a real withServerLayouts composition result.

ServerInspectorLayout

Reads pageProps, allLayoutProps, and getLayoutProps injected by withServerLayouts.

pageProps.title: Hello from server

allLayoutProps.has(DemoPage): true

allLayoutProps.size: 1

getLayoutProps(DemoPage)?.title: Hello from server

getLayoutProps<DemoPageProps>()?.title: Hello from server

getLayoutProps(MissingComponent) is undefined: true

Page output: Hello from server

Usage Snippet

Reference snippet for server layout.tsx/page.tsx usage.

import { withServerLayouts, type ServerLayoutComponent } from '@adonis-kit/react-layouts/server'

type PageProps = { title: string }

const Page = async ({ title }: PageProps) => <article>{title}</article>

const Layout: ServerLayoutComponent<PageProps> = ({ children, pageProps, allLayoutProps, getLayoutProps }) => {
  const fromPage = getLayoutProps(Page)?.title
  const latest = getLayoutProps<PageProps>()?.title

  return (
    <section data-has-page={String(allLayoutProps.has(Page))}>
      <h1>{pageProps.title}</h1>
      <small>
        By component: {fromPage ?? 'n/a'} | Latest: {latest ?? 'n/a'}
      </small>
      {children}
    </section>
  )
}

export const ServerPage = withServerLayouts(Page, [Layout])