Layout

K

kapa.ai•3/14/25, 2:33 PM

Hi @Jestem_Kamil. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

K

kapa.ai•3/14/25, 2:33 PM

----------------------
In Wasp, there are two main approaches to implement layouts similar to Next.js's layout.tsx:

Using a Root Component

The most straightforward way is to use Wasp's

rootComponent

rootComponent

rootComponent

rootComponent feature, which acts as a wrapper for your entire application:

// main.wasp
app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import Root from "@src/Root.jsx",
  }
}

// main.wasp
app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import Root from "@src/Root.jsx",
  }
}

// main.wasp
app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import Root from "@src/Root.jsx",
  }
}

// main.wasp
app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import Root from "@src/Root.jsx",
  }
}

// src/Root.jsx
export default function Root({ children }) {
  return (
    <div>
      <header>
        <h1>My App</h1>
      </header>
      {children}
      <footer>
        <p>My App footer</p>
      </footer>
    </div>
  )
}

// src/Root.jsx
export default function Root({ children }) {
  return (
    <div>
      <header>
        <h1>My App</h1>
      </header>
      {children}
      <footer>
        <p>My App footer</p>
      </footer>
    </div>
  )
}

// src/Root.jsx
export default function Root({ children }) {
  return (
    <div>
      <header>
        <h1>My App</h1>
      </header>
      {children}
      <footer>
        <p>My App footer</p>
      </footer>
    </div>
  )
}

// src/Root.jsx
export default function Root({ children }) {
  return (
    <div>
      <header>
        <h1>My App</h1>
      </header>
      {children}
      <footer>
        <p>My App footer</p>
      </footer>
    </div>
  )
}

This approach wraps your entire application with a common layout as shown in the client config documentation.

Creating Custom Layout Components

For more granular control, you can create custom layout components and use them in specific pages:

// src/Layout.jsx
export function Layout({ children }) {
  return (
    <div className="w-full h-full bg-white">
      <div className="min-w-full min-h-[75vh] flex items-center justify-center">
        <div className="w-full h-full max-w-sm p-5 bg-white">
          <div>{children}</div>
        </div>
      </div>
    </div>
  );
}

// src/Layout.jsx
export function Layout({ children }) {
  return (
    <div className="w-full h-full bg-white">
      <div className="min-w-full min-h-[75vh] flex items-center justify-center">
        <div className="w-full h-full max-w-sm p-5 bg-white">
          <div>{children}</div>
        </div>
      </div>
    </div>
  );
}

// src/Layout.jsx
export function Layout({ children }) {
  return (
    <div className="w-full h-full bg-white">
      <div className="min-w-full min-h-[75vh] flex items-center justify-center">
        <div className="w-full h-full max-w-sm p-5 bg-white">
          <div>{children}</div>
        </div>
      </div>
    </div>
  );
}

// src/Layout.jsx
export function Layout({ children }) {
  return (
    <div className="w-full h-full bg-white">
      <div className="min-w-full min-h-[75vh] flex items-center justify-center">
        <div className="w-full h-full max-w-sm p-5 bg-white">
          <div>{children}</div>
        </div>
      </div>
    </div>
  );
}

Then use this layout in your pages:

import { Layout } from './Layout'

export function MyPage() {
  return (
    <Layout>
      <div>My page content</div>
    </Layout>
  );
}

import { Layout } from './Layout'

export function MyPage() {
  return (
    <Layout>
      <div>My page content</div>
    </Layout>
  );
}

import { Layout } from './Layout'

export function MyPage() {
  return (
    <Layout>
      <div>My page content</div>
    </Layout>
  );
}

import { Layout } from './Layout'

export function MyPage() {
  return (
    <Layout>
      <div>My page content</div>
    </Layout>
  );
}

This pattern is commonly used in Wasp's auth pages as shown in various authentication examples.

Future Layout Support

Wasp is planning to add more comprehensive layout support in the future. There are open GitHub issues discussing features like:

K

kapa.ai•3/14/25, 2:33 PM

Layout declarations in the Wasp DSL
Applying layouts to groups of pages
Nested routing with layouts

These features would make layouts more similar to Next.js's approach, but they're still in development.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•3/14/25, 2:33 PM

Sorry @Jestem_Kamil, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

Using a Root Component

Creating Custom Layout Components

Future Layout Support

Similar Threads

Similar Threads

Using a Root Component

Creating Custom Layout Components

Future Layout Support

Similar Threads