Skip to content
RedwoodSDK
4th April 2025: This is a preview, whilst production-ready, it means some APIs might change

Layouts

In RedwoodSDK, layouts are simply React components that provide consistent structure and styling around your page content. Unlike some frameworks that automatically apply layouts to multiple pages based on file location, RedwoodSDK layouts are explicitly imported and used in each component where needed.

  1. Create a layouts directory to organize your layout components:

    • Directorysrc/
      • Directoryapp/
        • Directorylayouts/
          • …

  2. Create a basic layout component:

    src/app/layouts/MainLayout.tsx
    export default function MainLayout({ children }:
      {children: React.ReactNode}) {
      return (
        <>
          <Header />
          <main>
            {children}
          </main>
          <Footer />
        </>
      );
    }

  3. Use the layout in your page components:

    src/app/pages/HomePage.tsx
    import MainLayout from '../layouts/MainLayout'
    

    export default function HomePage() {
      return (
        <MainLayout>
          <h1>Hello World</h1>
          <p>This is the dream.</p>
        </MainLayout>
      );
    }