Link component for client navigation in NextJS - Mini Project: Build & Apply

Link component for client navigation

📖 Scenario: You are building a simple Next.js website with multiple pages. You want to create navigation links that let users move between pages without reloading the whole page. This makes the site faster and smoother.

🎯 Goal: Build a navigation bar using Next.js Link components to navigate between the Home and About pages with client-side navigation.

📋 What You'll Learn

Create a basic Next.js app structure with two pages: Home and About

Use the Next.js Link component to create navigation links

Ensure the links navigate without full page reload

Use semantic HTML for the navigation bar

💡 Why This Matters

🌍 Real World

Websites often have multiple pages. Using Next.js Link components lets users move between pages quickly without full page reloads, improving user experience.

💼 Career

Understanding client-side navigation with Next.js Link is essential for building fast, modern React-based web applications.

1

Create Home and About pages

Create two files: app/page.tsx for the Home page and app/about/page.tsx for the About page. In app/page.tsx, export a default function component called HomePage that returns an <h1> with text Home Page. In app/about/page.tsx, export a default function component called AboutPage that returns an <h1> with text About Page.

NextJS

# Create HomePage component in app/page.tsx
# Create AboutPage component in app/about/page.tsx

Need a hint?

Each page is a React component exported as default from its file. Use simple function components returning an <h1> with the page name.

2

Add a navigation bar component

Create a new file app/components/NavBar.tsx. Export a default function component called NavBar that returns a <nav> element containing an unordered list <ul> with two list items <li>. Each list item will later hold a navigation link.

NextJS

/* app/components/NavBar.tsx */
// Create NavBar component with  and  containing two  elements
// Your code here

Need a hint?

Use semantic HTML: <nav> for navigation and <ul> with <li> for list items.

3

Use Next.js Link component for navigation

Import Link from next/link in app/components/NavBar.tsx. Inside the first <li>, add a <Link> component with href="/" and text Home. Inside the second <li>, add a <Link> component with href="/about" and text About. This creates client-side navigation links.

NextJS

/* app/components/NavBar.tsx */
import Link from 'next/link'

export default function NavBar() {
  return (
    
      
        
          {/* Add Link to Home page here */}
        
        
          {/* Add Link to About page here */}
        
      
    
  );
}

/* app/page.tsx */
export default function HomePage() {
  return Home Page;
}

/* app/about/page.tsx */
export default function AboutPage() {
  return About Page;
}

Need a hint?

Use the Link component with the href prop set to the page path. The link text goes inside the component.

4

Add NavBar to Home and About pages

Import the NavBar component from app/components/NavBar in both app/page.tsx and app/about/page.tsx. Include the <NavBar /> component above the <h1> in both pages. This completes the navigation setup.

NextJS

/* app/page.tsx */
import NavBar from './components/NavBar'

export default function HomePage() {
  return (
    
      {/* Add NavBar component here */}
      Home Page
    
  )
}

/* app/about/page.tsx */
import NavBar from '../components/NavBar'

export default function AboutPage() {
  return (
    
      {/* Add NavBar component here */}
      About Page
    
  )
}

Need a hint?

Import the NavBar component and include it in the JSX above the page heading.