Layouts & Templates

Q: What is a layout in the Next.js App Router, and how does it work?

A layout is a component defined in a layout.js file that wraps a page and any of its nested pages, letting you share common user interface elements like a navigation bar or sidebar across multiple pages without repeating that code in every single page file.

Q: What is the difference between a layout and a template in the Next.js App Router?

A layout preserves its state and does not re-render when navigating between pages that share it, while a template, defined in a template.js file, creates a fresh instance and re-renders every time you navigate, which is useful when you want an animation or effect to run again on every page change.

Q: How do nested layouts work when you have layouts defined at multiple levels of your route structure?

Each folder in your route structure can have its own layout.js file, and Next.js automatically nests them, wrapping the innermost page with its closest layout first, and then wrapping that result with each parent layout going up the folder tree, building the full page piece by piece.

Q: How would you create a layout that only applies to a specific group of routes without affecting the URL structure?

You use a route group, created by wrapping a folder name in parentheses, such as (marketing), which lets you organize routes and apply a shared layout to them without that folder name appearing anywhere in the actual URL path.

Q: How do you fetch and share data across a layout and all of its nested pages efficiently?

You fetch shared data, such as the current user's profile, directly inside the layout component itself since layouts can also be async server components, and pass that data down to nested pages as needed, while relying on Next.js request deduplication to avoid fetching the same data twice if a nested page needs it too.

5 questions found

What is a layout in the Next.js App Router, and how does it work?

Beginner

A layout is a component defined in a layout.js file that wraps a page and any of its nested pages, letting you share common user interface elements like a navigation bar or sidebar across multiple pages without repeating that code in every single page file.

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div>
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Real-world example A dashboard application shares the same sidebar and header across every dashboard page by placing them in a single layout file, avoiding repeated code across dozens of individual pages.

Common follow-ups: Does a layout re-render every time you navigate between nested pages?;Can you nest multiple layouts inside each other?

Routing (App/Pages Router);Bundle Analysis & Code Splitting

What is the difference between a layout and a template in the Next.js App Router?

Beginner

A layout preserves its state and does not re-render when navigating between pages that share it, while a template, defined in a template.js file, creates a fresh instance and re-renders every time you navigate, which is useful when you want an animation or effect to run again on every page change.

// app/blog/template.js
export default function BlogTemplate({ children }) {
  return <div className="fade-in">{children}</div>;
}

Real-world example A blog uses a template to replay a subtle fade in animation every time a reader navigates to a different article, since a regular layout would not re-run that animation on each navigation.

Common follow-ups: When would you choose a template over a layout?;Can a route have both a layout and a template at the same time?

Rendering (SSR/SSG/ISR);Client Components & Hydration

How do nested layouts work when you have layouts defined at multiple levels of your route structure?

Intermediate

Each folder in your route structure can have its own layout.js file, and Next.js automatically nests them, wrapping the innermost page with its closest layout first, and then wrapping that result with each parent layout going up the folder tree, building the full page piece by piece.

// app/layout.js wraps everything
// app/dashboard/layout.js wraps dashboard pages
// app/dashboard/settings/page.js is the innermost content
export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

Real-world example An application has a root layout with a global header, a dashboard layout inside it with a sidebar, and individual pages nested even further inside, creating a clean, organized structure of shared user interface pieces.

Common follow-ups: How do you share data between a parent layout and its nested pages?;Does changing a nested layout require rebuilding parent layouts too?

Routing (App/Pages Router);State Management in Next.js Apps

How would you create a layout that only applies to a specific group of routes without affecting the URL structure?

Intermediate

You use a route group, created by wrapping a folder name in parentheses, such as (marketing), which lets you organize routes and apply a shared layout to them without that folder name appearing anywhere in the actual URL path.

// app/(marketing)/layout.js applies to routes below
// app/(marketing)/about/page.js is accessible at /about, not /marketing/about
export default function MarketingLayout({ children }) {
  return <div className="marketing-theme">{children}</div>;
}

Real-world example A company applies a distinct marketing themed layout to its about and pricing pages using a route group, while keeping the URLs clean at /about and /pricing rather than /marketing/about.

Common follow-ups: What other purposes do route groups serve besides organizing layouts?;Can you have multiple root layouts using route groups?

Routing (App/Pages Router);Metadata API & SEO Optimization

How do you fetch and share data across a layout and all of its nested pages efficiently?

Advanced

You fetch shared data, such as the current user's profile, directly inside the layout component itself since layouts can also be async server components, and pass that data down to nested pages as needed, while relying on Next.js request deduplication to avoid fetching the same data twice if a nested page needs it too.

export default async function DashboardLayout({ children }) {
  const user = await getCurrentUser();
  return (
    <div>
      <Header user={user} />
      {children}
    </div>
  );
}

Real-world example A dashboard layout fetches the current logged in user once and displays their name in the header, while individual dashboard pages can independently fetch that same user data again without triggering an extra database query thanks to deduplication.

Common follow-ups: Can a layout pass fetched data directly as props to its children?;How do you handle loading states for data fetched inside a layout?

Data Fetching;Loading UI & Streaming with Suspense