Layouts in Next.js

In this tutorial, you will learn how to create a layout in Next.js. Layouts are helpful to share UI across pages like header, sidebar, and footer etc.

How Layouts Work?

In the App Router, every folder can contain a layout.js file that wraps all child pages.

Example:


app/
 ├─ layout.js      → root layout
 ├─ main/
 │     └─ layout.js   → main layout
 └─ main/settings/page.js

How to define Root Layout?


export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

Note: Each child route uses the parent layout automatically.

Layouts in Next.js – Interview Questions

Q 1: What is a layout in Next.js?

Ans: A reusable UI structure shared across pages.

Q 2: How do you create a layout?

Ans: Using layout.js inside a folder.

Q 3: Are layouts persistent?

Ans: Yes, layouts persist between route changes.

Q 4: Can layouts be nested?

Ans: Yes, layouts can be nested.

Q 5: What is the benefit of layouts?

Ans: Code reusability and consistent UI.