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

Need a 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
}

Need a 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

Need a 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

Need a hint?

The layout will automatically wrap the About page content.