Next.js - Navigation and Linking

Quiz

Next.js provide several methods and features to simplify implementation of client side navigation and linking. In this chapter we will learn how to create navigation routes and implement navigation programmatically.

Create Next.js Navigation Routes

To create client side navigation routes, Next.js provide us a pre-defined <link> component. The <link> is a React component that extends HTML <a> tag and it's the primary way to navigate between Next.js routes. To use <link> need to export it from "next/links". See the example below.

Example

In the example below, we define a Nextjs layout component with navigation links to components we made in earlier sections. The layout component in next.js is a special component that's visible in every routes.

// app/layout.tsx file

import Link from 'next/link' // import linking component
import { ReactNode } from 'react';

interface RootLayoutProps {
  children: ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <body>
        {/* Define Header Element of App Layout */}
        <header>
            <h1>Header Element</h1>

            {/* Define Navigation bar inside header */}
            <ul> 
                <li><Link href="/">Home</Link></li> 
                <li><Link href="/products/">Products</Link></li>
                <li><Link href="/contacts/">Contacts</Link></li>
                <li><Link href="/about">About Us</Link></li>
            </ul>
        </header>

        {/* Section to call rest of components */ }
        <main>{children}</main> 
      </body>
    </html>
  );
}

Output

In the output, a navigation bar visible in every routes is created.

Linking to Dynamic Paths

We already learned about dynamic routing in Next.js. To link paths to dynamic routes, simply add dynamic paths to href attribute. See the example below

Example

In the example below, we declared a productId variable and called a route using the variable.

import Link from 'next/link'

export default function Products() {
    const productId = "Mac-Book-Pro"

    return (
        <div>
        <h2>Here are list of products</h2>

        <ul>
            <li><Link href="/products/IPhone"> Iphone</Link></li>
            <li><Link href="/products/Mac-Mini"> Mac Mini</Link></li>
            { /* Calling using productId variable*/ }
            <li><Link href={`/products/${productId}`}>{productId}</Link></li>
            <li><Link href="/products/Air-Pods-Pro">Air Pods Pro</Link></li>
        </ul>

        <Link href="/">Go Home</Link></div>
  );
}

Output

In the output below, dynamic product names are getting displayed.

Next.js Navigating Programmatically

Programmatically navigating means navigate to a specific route (like, home page, order confirmation page) upon user interactions like clicking button, or submitting a form etc. To implement this, Next.js provide 'useRouter' hook to navigate to any routes in the app.

Example

In the example below, we are implementing product ordering feature to the product page we created above. On clicking the button, user will get a confirmation of the order and redirect them to home page using 'useRoute' hook.

"use client"; 

import { useRouter } from "next/navigation";
import { PageProps } from "next/dist/shared/lib/router/utils/page-props";

export default function ProductPage({ params }: PageProps) {
    const router = useRouter();

    const handleClick = () =>{
        alert("Order Placed...");

        // Navigate to home page after placing order
        router.push("/");
    };
    return (
        <div>
        <h1>Product {params.id}</h1>
        <p>This is the product page for item {params.id}</p>
        <button onClick={handleClick}>Order Item</button>
        </div>
    );
}

Output

In the output, after placing order user is getting redirected to home page.

Print Page