Layout vs template difference in NextJS - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

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

In Next.js, both layouts and templates help organize pages. Which statement best describes their difference?

A Layouts wrap multiple pages and keep state between navigations, while templates are used to render individual pages without preserving state.

B Templates wrap multiple pages and keep state between navigations, while layouts are used to render individual pages without preserving state.

C Layouts and templates are exactly the same and can be used interchangeably in Next.js.

D Templates are only used for server components, while layouts are only used for client components.

💡 Hint

Think about which one keeps state when you move between pages.

Layouts in Next.js wrap multiple pages and preserve state during navigation, making them ideal for shared UI like navigation bars. Templates render individual pages and do not preserve state between navigations.

❓ component_behavior

intermediate

What happens to state inside a layout when navigating between pages using templates in Next.js?

Consider a layout component with a counter state. If you navigate between pages rendered by different templates inside this layout, what happens to the counter state?

A The counter state resets to initial value on every page navigation.

B The counter state is shared only if pages use the same template, otherwise it resets.

C The counter state persists and keeps its value across page navigations.

D The counter state is lost only if you refresh the browser, but not on navigation.

💡 Hint

Think about where the state is stored and if the layout stays mounted.

Layouts in Next.js stay mounted across page navigations, so state inside them persists. Templates render pages but do not affect the layout's state.

📝 Syntax

advanced

Which Next.js code snippet correctly defines a layout that wraps pages and preserves state?

Select the code that correctly implements a layout component in Next.js 14+ that wraps children and preserves state.

A

export default function Layout({ children }) {
  const [count, setCount] = React.useState(0);
  return <div>{children}<button onClick={() => setCount(count + 1)}>{count}</button></div>;
}

B

export default function Template({ children }) {
  const [count, setCount] = React.useState(0);
  return <div>{children}<button onClick={() => setCount(count + 1)}>{count}</button></div>;
}

C

export default function Layout({ children }) {
  const count = 0;
  return <div>{children}<button onClick={() => count++}>{count}</button></div>;
}

D

export default function Layout() {
  const [count, setCount] = React.useState(0);
  return <div><button onClick={() => setCount(count + 1)}>{count}</button></div>;
}

💡 Hint

Layouts receive children as props and can hold state with hooks.

Option A correctly defines a layout component that accepts children and uses React state to preserve count. Option A names it Template which is misleading. Option A misses children prop. Option A tries to mutate a constant which is invalid.

🔧 Debug

advanced

Why does state reset when navigating between pages in this Next.js layout?

Given this layout code, why does the counter reset to 0 every time you navigate to a new page? ```jsx export default function Layout({ children }) { const [count, setCount] = React.useState(0); return

{children}

; } ``` Assume pages are rendered with templates inside this layout.

A The state hook is used incorrectly and should be useSignal instead of useState.

B The button's onClick handler is not updating state properly, causing reset.

C The children prop is missing, so the layout remounts on every navigation.

D The layout is inside the app directory but not in the correct folder, so Next.js remounts it on navigation.

💡 Hint

Check where the layout file is placed in the Next.js app folder structure.

If the layout file is not placed in the correct folder (like app/layout.js or app/(group)/layout.js), Next.js will remount it on every navigation, resetting state. Using useState is correct. Children prop is present. The button handler updates state correctly.

❓ lifecycle

expert

How does Next.js handle layout and template rendering order during navigation?

In Next.js 14+, when navigating between pages that share the same layout but different templates, what is the correct rendering lifecycle order?

A Both layout and template components unmount and remount on every page navigation.

B The layout component stays mounted, only the template component unmounts and remounts for each page.

C The template component stays mounted, and the layout component unmounts and remounts on navigation.

D Neither layout nor template components unmount; Next.js reuses all components without remounting.

💡 Hint

Think about which part preserves state and which part changes per page.

Next.js keeps the layout mounted to preserve state and only replaces the template component when navigating between pages. This improves performance and user experience.