Layout navigation behavior in NextJS - Interactive Code 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 (
    <div>[1]>{children}</div>
  )
}

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

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

BclassName="layout"

Cid="main-layout"

Drole="navigation"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'class' instead of 'className'.

Forgetting to wrap children inside the div.

The layout div should have a className for styling. Here, className="layout" is correct.

2fill in blank

medium

Complete the code to import the usePathname hook from Next.js navigation.

NextJS

import { [1] } from 'next/navigation';

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

AusePathname

BuseRouter

CuseLink

DuseNavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing useRouter with usePathname.

Trying to import from 'next/router' instead of 'next/navigation'.

The usePathname hook is imported from next/navigation to get the current path.

3fill in blank

hard

Fix the error in the layout component to correctly use the usePathname hook.

NextJS

import { usePathname } from 'next/navigation';

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

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

AuseNavigate

BuseRouter

CusePathname

DuseLink

Attempts:

3 left

💡 Hint

Common Mistakes

Using useRouter instead of usePathname.

Forgetting the parentheses after the hook name.

The hook usePathname must be called as a function to get the current path.

4fill in blank

hard

Fill both blanks to conditionally add an active class to a navigation link based on the current path.

NextJS

const path = usePathname();

return (
  <nav>
    <a href="/about" className={path [1] '/about' ? 'active' : ''}>About</a>
    <a href="/contact" className={path [2] '/contact' ? 'active' : ''}>Contact</a>
  </nav>
);

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

A===

B!==

C==

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using loose equality operators like == or !=.

Using inequality operators which invert the logic.

Use strict equality === to compare the current path with the link href for accurate matching.

5fill in blank

hard

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

NextJS

export default function Layout({ children }) {
  return (
    <[1]>
      <h1>Site Title</h1>
    </[1]>
    <[2]>
      {children}
    </[2]>
    <[3]>
      <p>© 2024 My Site</p>
    </[3]>
  );
}

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

Aheader

Bmain

Cfooter

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-semantic tags like div instead of semantic tags.

Mixing up the order of header, main, and footer.

Use semantic HTML tags: header for the top, main for main content, and footer for the bottom.