Layout vs template difference in NextJS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a layout component that wraps page content.

NextJS

export default function Layout({ children }) {
  return <[1]>{children}</[1]>;
}

Drag options to blanks, or click blank then click option'

Amain

Bsection

Cheader

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

which are for page sections, not main content.

The

tag is used to wrap the main content of a page, making it a good choice for a layout wrapper.

2fill in blank

medium

Complete the code to define a Next.js template that renders a page with a title.

NextJS

export default function Template() {
  return <div><h1>[1]</h1></div>;
}

Drag options to blanks, or click blank then click option'

A<Welcome to my site>

BWelcome to my site

C"Welcome to my site"

D{Welcome to my site}

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes includes the quotes in the rendered output.

Using angle brackets or curly braces causes syntax errors or invalid elements.

In JSX, static text placed directly between opening and closing tags renders as content without quotes.

3fill in blank

hard

Fix the error in the layout component to correctly include the header and children.

NextJS

export default function Layout({ children }) {
  return (
    <div>
      [1]
      {children}
    </div>
  );
}

function Header() {
  return <header>Site Header</header>;
}

Drag options to blanks, or click blank then click option'

AHeader()

Bheader

C<header />

D<Header />

Attempts:

3 left

💡 Hint

Common Mistakes

Calling component as a function inside JSX causes errors.

In React/Next.js, components must be used as JSX tags with capitalized names and self-closing or with children.

4fill in blank

hard

Fill both blanks to create a template that uses a layout and renders page content.

NextJS

import Layout from './Layout';

export default function Template() {
  return (
    <[1]>
      <p>Hello, world!</p>
    </[2]>
  );
}

Drag options to blanks, or click blank then click option'

ALayout

Bdiv

Csection

Dmain

Attempts:

3 left

💡 Hint

Common Mistakes

Using different tags for opening and closing causes errors.

The template uses the Layout component to wrap its content, so both opening and closing tags must be <Layout> and </Layout>.

5fill in blank

hard

Fill all three blanks to create a layout with header, main content, and footer.

NextJS

export default function Layout({ children }) {
  return (
    <>
      <[1]>Site Header</[2]>
      <[3]>{children}</[3]>
      <footer>Site Footer</footer>
    </>
  );
}

Drag options to blanks, or click blank then click option'

Aheader

Bfooter

Cmain

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up header and footer tags or mismatched tags.

The header and its closing tag use <header>, and the main content uses <main> tags to wrap children.

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