What Layouts Are in Next.js

As your application grows, many pages start to share the same structure. For example, most pages may include a header, navigation menu, and footer.

Instead of repeating this structure in every page, Next.js provides layouts.

A layout is a component that wraps multiple pages and defines shared UI. It allows you to keep your app consistent and avoid duplicating code.

Why Layouts Are Important

Without layouts, you would need to repeat the same structure in every page:

export default function Page() {
  return (
    <div>
      <header>Header</header>
      <main>Content</main>
      <footer>Footer</footer>
    </div>
  );
}

This quickly becomes hard to maintain.

With layouts, you define this structure once and reuse it across pages.

How Layouts Work

Layouts wrap your pages and render their content using a special children prop.

export default function Layout({ children }) {
  return (
    <div>
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  );
}

The children represents the content of the current page.

Where Layouts Are Used

Layouts are defined using a layout.tsx file inside the app/ folder or any route folder.

Example:

app/
  layout.tsx
  page.tsx

This layout will wrap all pages in the application.

What Layouts Provide

• Shared UI across multiple pages;
• Consistent structure for your app;
• Cleaner and more maintainable code;
• Better organization of components.