Layout navigation behavior in NextJS - Mini Project: Build & Apply

Layout Navigation Behavior in Next.js

📖 Scenario: You are building a simple website with a navigation menu that stays visible on every page. This menu helps users move between the Home and About pages easily.

🎯 Goal: Create a Next.js layout component that includes a navigation bar with links to Home and About pages. The navigation should appear on both pages, and clicking the links should change the page content without reloading the whole page.

📋 What You'll Learn

Create a layout component with a navigation bar

Use Next.js Link components for navigation

Include two pages: Home and About

Ensure the layout wraps both pages so navigation is always visible

💡 Why This Matters

🌍 Real World

Layouts with navigation are common in websites and apps to provide consistent menus and headers across pages.

💼 Career

Understanding layout components and client-side navigation is essential for building modern React and Next.js applications.

1

Create the basic layout component

Create a file called layout.js inside the app directory. Inside it, create a React functional component called Layout that returns a <div> with the text Navigation will go here. Export the Layout component as default.

NextJS

// Your code here

Hint

Remember to use a function named Layout and export it as default.

2

Add navigation links using Next.js Link component

Import Link from next/link at the top of layout.js. Inside the Layout component, replace the text with a <nav> element containing two <Link> components. One link should have href="/" and text Home, the other should have href="/about" and text About. Wrap the nav and children inside a <div>. Add a children parameter to the Layout function and render it below the nav.

NextJS

import Link from 'next/link';

export default function Layout({ children }) {
  // Your code here
}

Hint

Use Link components inside a nav element and render children below.

3

Create the Home page using the layout

Create a file called page.js inside the app directory. Create a default exported function called HomePage that returns a <main> element with an <h1> containing the text Welcome to the Home Page. The layout will automatically wrap this content.

NextJS

// Your code here

Hint

The layout will automatically wrap this page content.

4

Create the About page using the layout

Create a folder called about inside the app directory. Inside about, create a file called page.js. Create a default exported function called AboutPage that returns a <main> element with an <h1> containing the text About Us. The layout will automatically wrap this content.

NextJS

// Your code here

Hint

The layout will automatically wrap the About page content.

Practice

1. What is the main purpose of using a RootLayout in Next.js?

easy

A. To load all pages at once for faster initial load

B. To keep common UI elements like headers and footers visible during navigation

C. To disable client-side navigation

D. To create separate CSS files for each page

Solution

1. Step 1: Understand what RootLayout does

   The RootLayout wraps all pages and keeps shared UI elements visible.

2. Step 2: Identify the benefit during navigation

   It allows headers and footers to stay visible, so only page content changes, making navigation smooth.

3. Final Answer:

   To keep common UI elements like headers and footers visible during navigation -> Option B

4. Quick Check:

   Layouts keep UI visible = A [OK]

Hint: Remember layouts keep shared UI visible during page changes [OK]

Common Mistakes:

• Thinking RootLayout loads all pages at once
• Confusing RootLayout with CSS management
• Assuming RootLayout disables navigation

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

easy

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

B. function Layout() { return {props.children} } export default Layout

C. export const Layout = () => {children}

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

Solution

1. Step 1: Check the function signature and props usage

   export default function Layout({ children }) { return <div>{children}</div> } correctly uses a function with a destructured children prop.

2. Step 2: Verify JSX return and export

   export default function Layout({ children }) { return <div>{children}</div> } returns <div>{children}</div> and exports default properly.

3. Final Answer:

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

4. Quick Check:

   Correct props and export syntax = A [OK]

Hint: Use destructured children prop in layout function [OK]

Common Mistakes:

• Using props without destructuring
• Not exporting default properly
• Returning children without JSX wrapper

3. Given this layout and page code, what will be visible after navigating from /home to /about?

/* RootLayout.js */
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>Site Header</header>
        {children}
        <footer>Site Footer</footer>
      </body>
    </html>
  )
}

/* About.js */
export default function About() {
  return <main>About Page Content</main>
}

medium

A. Site Header, About Page Content, and Site Footer are visible

B. Blank page due to missing navigation setup

C. Site Header and Site Footer only, no page content

D. Only the About Page Content is visible

Solution

1. Step 1: Understand layout wrapping

   The RootLayout wraps all pages, so header and footer stay visible.

2. Step 2: Identify what {children} renders

   The {children} renders the current page content, here the About page.

3. Final Answer:

   Site Header, About Page Content, and Site Footer are visible -> Option A

4. Quick Check:

   Layout wraps page content = D [OK]

Hint: Remember layouts keep header/footer visible with page content [OK]

Common Mistakes:

• Thinking only page content shows without header/footer
• Assuming layout replaces page content
• Believing navigation breaks without extra setup

4. You have this layout code but the header disappears after navigation. What is the likely cause?

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>My Header</header>
        <main>{children}</main>
      </body>
    </html>
  )
}

// Page component
export default function Page() {
  return <div>Page Content</div>
}

medium

A. The header tag is invalid in Next.js layouts

B. The page component must include the header explicitly

C. The children prop is missing in the layout function parameters

D. The layout file is named incorrectly and not recognized as a layout

Solution

1. Step 1: Check layout recognition rules

   Next.js requires layout files to be named layout.js or layout.tsx to work as layouts.

2. Step 2: Identify why header disappears

   If the file is not named correctly, Next.js treats it as a normal component, so header won't persist on navigation.

3. Final Answer:

   The layout file is named incorrectly and not recognized as a layout -> Option D

4. Quick Check:

   Correct layout filename needed = B [OK]

Hint: Ensure layout files are named layout.js or layout.tsx [OK]

Common Mistakes:

• Thinking header tag is invalid
• Forgetting to include children prop
• Expecting page to include header manually

5. You want to keep a sidebar visible across multiple pages but hide it on the login page. How should you structure your Next.js layouts to achieve this?

hard

A. Use a single RootLayout and conditionally render sidebar based on URL inside it

B. Add sidebar inside every page except login manually

C. Create a RootLayout with sidebar and a separate layout for login without sidebar

D. Put sidebar inside the login page and hide it on other pages

Solution

1. Step 1: Understand layout nesting in Next.js

   You can create multiple layouts: a RootLayout for common UI and a separate layout for specific pages.

2. Step 2: Apply layouts to show/hide sidebar

   Put sidebar in RootLayout so it shows on all pages except login, which uses its own layout without sidebar.

3. Final Answer:

   Create a RootLayout with sidebar and a separate layout for login without sidebar -> Option C

4. Quick Check:

   Use nested layouts to control UI per page = C [OK]

Hint: Use nested layouts to show/hide UI per page [OK]

Common Mistakes:

• Duplicating sidebar in every page manually
• Using conditional rendering inside one layout causing complexity
• Placing sidebar inside login page instead of excluding it