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.