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.

Practice

1. In Next.js, what is the main role of a layout component?

easy

A. To manage client-side state

B. To provide common page structure like headers and footers

C. To handle API requests

D. To define unique content for each page

Solution

1. Step 1: Understand layout purpose

   Layouts in Next.js wrap pages to provide shared UI elements like headers and footers.

2. Step 2: Differentiate from templates

   Templates hold unique page content, not common structure.

3. Final Answer:

   To provide common page structure like headers and footers -> Option B

4. Quick Check:

   Layout = common structure [OK]

Hint: Layouts wrap pages with shared UI elements [OK]

Common Mistakes:

• Confusing layouts with templates
• Thinking layouts handle data fetching
• Assuming layouts manage state

2. Which of the following is the correct way to define a layout in Next.js 14+ using the App Router?

easy

A. export default function Layout({ children }) { return {children} }

B. function Layout() { return Page Content }

C. const Layout = () => Header

D. export function layout() { return {children} }

Solution

1. Step 1: Check export and props

   Layouts must be default exported and receive children prop to wrap page content.

2. Step 2: Validate syntax

   export default function Layout({ children }) { return
   {children} } correctly exports a function with { children } and returns JSX wrapping children.

3. Final Answer:

   export default function Layout({ children }) { return <div>{children}</div> } -> Option A

4. Quick Check:

   Default export + children prop = export default function Layout({ children }) { return
   {children}
   } [OK]

Hint: Layouts must export default and accept children [OK]

Common Mistakes:

• Not exporting default
• Missing children prop
• Using lowercase function name for layout

3. Given this Next.js layout component:

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <header>Site Header</header>
        {children}
        <footer>Site Footer</footer>
      </body>
    </html>
  )
}

And a page component:

export default function Page() {
  return <main>Welcome!</main>
}

What will be the rendered HTML structure?

medium

A. Site HeaderWelcome!Site Footer

B. Welcome!

C. Site HeaderSite Footer

D. Welcome!

Solution

1. Step 1: Understand layout wrapping

   The layout wraps the page content inside <html> and <body> tags, adding header and footer around children.

2. Step 2: Insert page content

   The page returns <main>Welcome!</main>, which is placed where {children} is in layout.

3. Final Answer:

   <html><body><header>Site Header</header><main>Welcome!</main><footer>Site Footer</footer></body></html> -> Option A

4. Quick Check:

   Layout wraps page content with header/footer [OK]

Hint: Children content appears inside layout's wrapper [OK]

Common Mistakes:

• Ignoring layout wrapping
• Thinking page replaces entire layout
• Missing header or footer in output

4. You wrote this layout in Next.js:

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

But the page content does not render inside the layout. What is the problem?

medium

A. The footer tag is invalid in layouts

B. The layout should not have a header

C. The layout function does not accept the children prop

D. The layout must be a class component

Solution

1. Step 1: Check function parameters

   The layout must accept { children } as a parameter to render page content inside.

2. Step 2: Identify missing children prop

   The code misses { children } in the function signature, so it cannot render page content.

3. Final Answer:

   The layout function does not accept the children prop -> Option C

4. Quick Check:

   Missing children prop causes no page content [OK]

Hint: Layouts must accept children prop to render page content [OK]

Common Mistakes:

• Forgetting to add children parameter
• Thinking header/footer cause error
• Believing layouts must be class components

5. You want to create a Next.js page that uses a layout with a sidebar and header. The sidebar should only appear on some pages, but the header should always be present. How should you organize layouts and templates to achieve this?

hard

A. Add sidebar inside each page component instead of layouts

B. Put header and sidebar in the same layout used by all pages

C. Use templates only and avoid layouts for shared UI

D. Create a main layout with header, then nested layouts for pages with sidebar

Solution

1. Step 1: Identify shared and conditional UI

   The header is shared by all pages, so it belongs in the main layout. Sidebar is conditional, so it fits in nested layouts.

2. Step 2: Use nested layouts

   Create a main layout with header, then nest layouts for pages needing sidebar to add it without affecting others.

3. Final Answer:

   Create a main layout with header, then nested layouts for pages with sidebar -> Option D

4. Quick Check:

   Nested layouts handle conditional UI [OK]

Hint: Use nested layouts for conditional UI parts [OK]

Common Mistakes:

• Putting all UI in one layout causing unwanted sidebar
• Adding sidebar directly in pages losing layout benefits
• Avoiding layouts and mixing shared UI in templates