Nested layouts in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a basic layout component in Next.js.

NextJS

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

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

Astyle={{ padding: '1rem' }}

BclassName="layout"

Cid="main-layout"

Drole="main"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to wrap children inside the div.

Using incorrect syntax for the style prop.

The layout wraps children with a div that has padding using inline style.

2fill in blank

medium

Complete the code to create a nested layout by importing and using a parent layout.

NextJS

import ParentLayout from './ParentLayout';

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

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

AclassName="child-layout"

Bstyle={{ marginTop: '2rem' }}

Cid="child-section"

Drole="region"

Attempts:

3 left

💡 Hint

Common Mistakes

Using style instead of className when CSS classes are expected.

Not wrapping children inside the section element.

The child layout adds a class name to the section wrapping children inside the parent layout.

3fill in blank

hard

Fix the error in the nested layout by completing the code to correctly pass children.

NextJS

export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      [1]
    </div>
  );
}

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

A<Sidebar /> <main>{child}</main>

B<Sidebar /> <main>{children}</main>

C<Sidebar /> <main>{children()}</main>

D<Sidebar /> <main>{props.children}</main>

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'child' instead of 'children'.

Calling children as a function when it is not.

Using props.children without defining props.

The children prop must be used exactly as passed to render nested content inside the main element.

4fill in blank

hard

Fill both blanks to create a nested layout that includes a header and footer around children.

NextJS

export default function SiteLayout({ children }) {
  return (
    <div className="site-layout">
      [1]
      {children}
      [2]
    </div>
  );
}

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

A<header>Site Header</header>

B<footer>Site Footer</footer>

C<nav>Main Navigation</nav>

D<aside>Sidebar Content</aside>

Attempts:

3 left

💡 Hint

Common Mistakes

Placing footer before children.

Using non-semantic divs instead of header/footer.

The layout wraps children with a header above and a footer below for consistent site structure.

5fill in blank

hard

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

NextJS

export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard-layout">
      [1]
      <main [2]>{children}</main>
      [3]
    </div>
  );
}

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

A<Sidebar />

BclassName="dashboard-main"

C<Footer />

D<Header />

Attempts:

3 left

💡 Hint

Common Mistakes

Placing footer before sidebar.

Forgetting to add className to main.

Using Header instead of Footer at the end.

The layout includes a sidebar component, main content area with a class, and a footer component for full dashboard structure.