NextjsHow-ToBeginner · 3 min read

How to Create Layout in Next.js: Simple Guide with Examples

In Next.js, create a layout by making a React component that wraps your page content, then use it in your app/layout.js or wrap pages manually. This lets you share headers, footers, or sidebars across pages easily.

📐

Syntax

In Next.js, a layout is a React component that wraps your page content. You typically create a layout.js file inside the app directory. This component receives children which represents the page content.

Basic parts:

export default function Layout({ children }): Defines the layout component.
{children}: Placeholder for page content inside the layout.
Wrap your layout around page content to share UI elements like headers or footers.

javascript

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <h1>My Site Header</h1>
        </header>
        <main>{children}</main>
        <footer>
          <p>© 2024 My Site</p>
        </footer>
      </body>
    </html>
  )
}

💻

Example

This example shows a simple layout in Next.js that adds a header and footer around page content. The app/layout.js file defines the layout, and any page inside app will use it automatically.

javascript

// app/layout.js
export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <header style={{ padding: '1rem', backgroundColor: '#eee' }}>
          <h1>Welcome to My Next.js Site</h1>
        </header>
        <main style={{ padding: '1rem' }}>{children}</main>
        <footer style={{ padding: '1rem', backgroundColor: '#eee', marginTop: '2rem' }}>
          <p>© 2024 My Next.js Site</p>
        </footer>
      </body>
    </html>
  )
}

// app/page.js
export default function HomePage() {
  return <p>This is the home page content inside the layout.</p>
}

Output

⚠️

Common Pitfalls

Common mistakes when creating layouts in Next.js include:

Not placing layout.js in the correct app directory, so Next.js does not apply it.
Forgetting to include {children} inside the layout, which causes page content not to render.
Using legacy pages/_app.js layout patterns in the new app directory, which are incompatible.

Always use the new app/layout.js file for layouts in Next.js 13+ with the App Router.

javascript

/* Wrong: Missing children in layout */
export default function Layout() {
  return (
    <html>
      <body>
        <header>Header</header>
        {/* No children here, page content won't show */}
        <footer>Footer</footer>
      </body>
    </html>
  )
}

/* Right: Include children */
export default function Layout({ children }) {
  return (
    <html>
      <body>
        <header>Header</header>
        {children}
        <footer>Footer</footer>
      </body>
    </html>
  )
}

📊

Quick Reference

Layout file: Place layout.js inside the app folder.
Children prop: Use {children} to render page content inside the layout.
Shared UI: Add headers, footers, or sidebars inside the layout component.
Automatic usage: Next.js applies the layout to all pages inside the folder.

✅

Key Takeaways

Create a layout component in app/layout.js to wrap page content with shared UI.

Always include the children prop to render page content inside the layout.

Next.js automatically applies layouts to pages in the same folder.

Avoid legacy _app.js layouts when using the new app directory.

Layouts help keep consistent headers, footers, and navigation across pages.