WDD 430: Web Full-Stack Development

Navigating Between Pages

Overview

Next.js provides a powerful and intuitive way to navigate between pages in an application. In standard HTML, the <a> element is used for navigation, which causes a full page reload. In this activity, you will learn how to use the built-in Link component for client-side navigation, handle dynamic routes, and manage navigation state effectively.

Prepare

<Link> Component

Next.js provides a built-in Link component that enables client-side navigation between pages. This allows for faster transitions and a smoother user experience without full page reloads.

To use the Link component, import it from the next/link package and render it with an href destination. For example:

import Link from 'next/link';

<Link href="/about">About Us</Link>

In this example, clicking on the About Us link will navigate the user to the /about page without a full page reload, providing a seamless navigation experience.

Automatic Code-Splitting and Prefetching

Code-splitting means Next.js only loads the JavaScript needed for the current page — not the entire application. This keeps initial load times fast.

Prefetching works alongside this. Whenever a <Link> component enters the viewport, Next.js quietly fetches that page's code in the background. By the time a user clicks the link, the page is already loaded.

This combination means users experience near-instant navigation without any extra work on your part — Next.js handles it automatically in production.

Dynamic Routes and Navigation State

Next.js supports dynamic routes, which allow you to create pages that can handle dynamic content based on URL parameters. For example, you can create a dynamic route for a blog post by using square brackets in the file name, such as app/blog/[slug]/page.tsx. This allows you to capture the slug parameter from the URL and use it to fetch and display the appropriate content.

When navigating to a dynamic route, pass the path directly with the Link component. For example:

<Link href="/blog/hello-world">Read our Hello World blog post</Link>

In this example, clicking on the link will navigate the user to the /blog/hello-world page, where the slug parameter will be set to "hello-world". You can then use this parameter in your page component to fetch and display the relevant blog post content.

Common UI Feature: Active Links

To indicate which page is currently active in your navigation, you can use the usePathname hook from the next/navigation package. Because usePathname is a client hook, place this logic in a Client Component.

A Client Component is a React component that runs on the client-side and can use client-side features like hooks.

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function NavLinks() {
  const pathname = usePathname();

  return (
    <nav aria-label="Primary">
      <Link
        href="/about"
        className={pathname === '/about' ? 'active' : ''}
        aria-current={pathname === '/about' ? 'page' : undefined}
      >
        About Us
      </Link>
    </nav>
  );
}

In this example, the active class is applied when the user is actually on the /about page and the aria-current attribute is set to page.

Activity Instructions

Use your portfolio application to complete this activity.

1. Confirm your existing routes work: / (app/page.tsx) and /about (app/about/page.tsx).
2. Create one new page, such as app/contact/page.tsx, and add simple placeholder content.
3. Update your navigation (for example, in your existing header component) to include links for /, /about, and /contact using Link.
4. Create a small Client Component for nav links (for example, components/NavLinks.tsx) and implement active-link styling with usePathname.
5. Test navigation between all three routes and verify the active style and aria-current value update correctly.