Why Next.js navigation is optimized - See It in Action

Why Next.js Navigation Is Optimized

📖 Scenario: You are building a simple website using Next.js. You want to understand how Next.js makes navigation between pages fast and smooth for users.

🎯 Goal: Learn how Next.js preloads pages and uses client-side navigation to make moving between pages quick without full page reloads.

📋 What You'll Learn

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

Add a navigation menu using Next.js Link component

Use prefetch to preload the About page

Observe how navigation happens without full page reload

💡 Why This Matters

🌍 Real World

Websites and apps built with Next.js use this optimized navigation to improve user experience by making page changes fast and seamless.

💼 Career

Understanding Next.js navigation helps developers build performant React apps that feel smooth and responsive, a key skill for frontend roles.

1

Create two pages: Home and About

Create a file pages/index.js with a functional component called Home that returns a heading <h1>Home Page</h1>. Also create pages/about.js with a functional component called About that returns a heading <h1>About Page</h1>.

NextJS

// Create pages/index.js
// Your code here

// Create pages/about.js
// Your code here

Need a hint?

Use simple React functional components that return an <h1> element with the page name.

2

Add navigation menu with Next.js Link

In pages/index.js, import Link from next/link. Add a navigation menu with a <nav> containing a Link to /about with the text About. Do the same in pages/about.js with a Link back to / with the text Home.

NextJS

import Link from 'next/link';

export default function Home() {
  return (
    
      {/* Add navigation menu here */}
      Home Page
    
  );
}

// In pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    
      {/* Add navigation menu here */}
      About Page
    
  );
}

Need a hint?

Use the Link component from Next.js to create navigation links that do not reload the page.

3

Enable prefetching for About page link

In pages/index.js, add the prefetch attribute to the Link component that links to /about. This will preload the About page in the background.

NextJS

import Link from 'next/link';

export default function Home() {
  return (
    
      
        {/* Add prefetch attribute to Link below */}
        About
      
      Home Page
    
  );
}

// In pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    
      
        Home
      
      About Page
    
  );
}

Need a hint?

Add the prefetch attribute inside the Link tag to enable preloading.

4

Observe client-side navigation without full reload

Run the Next.js app and click the About link on the Home page. Notice that the page changes instantly without a full reload. This happens because Next.js preloads the About page and uses client-side navigation.

NextJS

import Link from 'next/link';

export default function Home() {
  return (
    
      
        About
      
      Home Page
    
  );
}

// In pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    
      
        Home
      
      About Page
    
  );
}

// No code to add here, just run and observe

Need a hint?

Run the app with npm run dev and click the links to see fast navigation.