Link and its props in Next.js

In this article we will describe Next.js Link and its props

Link is primarily used to navigate between routes in Next.js. It is a React component that extends the HTML <a> element. It provides client-side navigation and prefetching facilities.

✍️ How to use Link in Next.js

To use Link in Next.js we need to import it from next/link.

import Link from 'next/link

Then we can use it in UI. href is required. So we have to pass a value for it. The value is the routes where we want to navigate. Here, by clicking the button users will be navigated to about page.

import Link from 'next/link';
export default function Home() {
  return (
    <div>
      Welcome to the Home page
      <div>
        <Link href="/about">
          <button className='px-3 py-2 bg-blue-600 text-white rounded-md'>Go to About Page</button>
        </Link>
      </div>
    </div>
  );
}

NB: Only href is required and rest are optional.

👉 href: We have described it before.

👉 replace

It is optional, and the default value is false. When we add replace, the value is settled to true. It means the browser's history is replaced with a new URL. Now, users can not go to the previous page by clicking the browser's back button.

import Link from 'next/link';

export default function Home() {
  return (<>

    <div>
      <nav className="bg-gray-800 p-4">
        <ul className="flex space-x-4">
          <li>
            <Link href="/">
              Home
            </Link>
          </li>
          <li>
            <Link href="/about" >
              About
            </Link>
          </li>
          <li>
            <Link href="/contactus">
              Contact
            </Link>
          </li>
        </ul>
      </nav>
      <div>
        Welcome to Home page
        <div className="space-y-8">
          <div>
            <Link href="/about" replace>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to About Page
              </button>
            </Link>
          </div>

          <div>
            <Link href="/contactus">
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contactus Page
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div >

  </>);
}

What is happening now? As we used replace props in Link component. If the user navigates to the about page by clicking the button from the Home Page. The user can not get back to to Home Page(previous page).

Where/when to use

login/logout page: After login or logout the user will be redirected to the Home Page. From there he/she should not -back- to the login or logout page again.
form submission: After submitting a form, the user will be redirected to the -Welcome Page- and will not be allowed to back to the form submission page.
And many more places where users are not allowed to back to the previous page.

👉 scroll

scroll props control the viewport behavior. If scroll={true} is true, users will see the component/page in his/her viewport. If not visible in the viewport, Next.js will scroll to the top of the first page element. The default value is true. If you want to disable the behavior, set scroll={false}.

import Link from 'next/link';

export default function Home() {
  return (<>

    <div>
      <nav className="bg-gray-800 p-4">
        <ul className="flex space-x-4">
          <li>
            <Link href="/">
              Home
            </Link>
          </li>
          <li>
            <Link href="/about" >
              About
            </Link>
          </li>
          <li>
            <Link href="/contactus">
              Contact
            </Link>
          </li>
        </ul>
      </nav>
      <div>
        Welcome to Home page
        <div className="space-y-8">
          <div>
            <Link href="/about" scroll={true}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to About Page
              </button>
            </Link>
          </div>

          <div>
            <Link href="/contactus" scroll={false}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contact us Page
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div >

  </>);
}

👉 Where to use

If you have a huge list on your page, or the page is an infinite scroll page, and you want to hold the position of the viewport. So that users can return to the same viewport after navigating other pages, set scroll={false}.

👉 prefetch

By prefetching, we mean preloading the JavaScript code, static assets, and data required for server-side rendering of the page associated with the link. Next.js automatically prefetches routes in production when a <Link> component enters the user’s viewport.

import Link from 'next/link';

export default function Home() {
  return (<>

    <div>
      <nav className="bg-gray-800 p-4">
        <ul className="flex space-x-4">
          <li>
            <Link href="/">
              Home
            </Link>
          </li>
          <li>
            <Link href="/about" >
              About
            </Link>
          </li>
          <li>
            <Link href="/contactus">
              Contact
            </Link>
          </li>
        </ul>
      </nav>
      <div>
        Welcome to Home page
        <div className="space-y-8">
          <div>
            <Link href="/about" prefetch={true}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to About Page
              </button>
            </Link>
          </div>

          <div>
            <Link href="/contactus" prefetch={true}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contact Us Page
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div >

  </>);
}

From the example, prefetch happens when users enter the home page as the link component is associated. If users click the button, the component will be shown immediately as it is loaded in the background.
If prefetch={false} is seated, the linked component will never be prefetched until users enter the page/component.

import Link from 'next/link';

export default function Home() {
  return (<>

    <div>
      <nav className="bg-gray-800 p-4">
        <ul className="flex space-x-4">
          <li>
            <Link href="/">
              Home
            </Link>
          </li>
          <li>
            <Link href="/about" >
              About
            </Link>
          </li>
          <li>
            <Link href="/contactus">
              Contact
            </Link>
          </li>
        </ul>
      </nav>
      <div>
        Welcome to Home page
        <div className="space-y-8">
          <div>
            <Link href="/about" prefetch={true}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to About Page
              </button>
            </Link>
          </div>

          <div>
            <Link href="/contactus" prefetch={false}>
              <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contact Page
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div >

  </>);
}

From the example, -about us- page will be prefetched when users enter the -home page-, but the -contact us page- will not. -contact us- page will be fetched when users click on the -Link- component.
Prefetching is disabled in development mode to avoid unnecessary network activity during hot reloads.

👉 Where to use

-prefetch- gives smooth page navigation.
Balance Bandwidth: Excessive prefetching can overwhelm network resources. Use -prefetch={false}- on rarely visited or large routes.

👉 legacyBehavior

An <a> element is no longer required as a child of <Link>.
Example wrong way

<div>
  <Link >
       <a href="">
           <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                  Go to Contactus Page
           </button>
        </a>
   </Link>
</div>

Example right way

<div>
  <Link href="/contactus">
    <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contact Page
    </button>
  </Link>
</div>

NB:_ Do not use <a> tag.

👉 passHref

The passHref is used to pass the href prop to its child in Next.js via the <Link> component. This is important when the child of <Link> is a custom component that wraps an anchor tag <a>.

👉 shallow

The shallow props let us update the path of the current page without running any of Next.js' data fetching methods. The default value is false.

👉 locale

The locale prop is used to navigate users to different versions of a webpage based on the user's preferred locale.
next.config.js

module.exports = {
  i18n: {
    locales: ['en', 'bn'],
    defaultLocale: 'en',
  },
};

<Link href="/about" locale={true}>
  About Page (locale true)
</Link>

As locale is true, by clicking the link prefix is added to the author. Like _en/about.

<Link href="/about" locale={false}>
  About Page (locale false)
</Link>

As locale is false, by clicking the link prefix will not be added to the about. Like /about. It works like it normally does.

👉 onNavigate

An event handler is called during client-side navigation. The handler receives an event object that includes a preventDefault() method, allowing you to cancel the navigation if needed.

import Link from 'next/link'

export default function Page() {
  return (
    <Link
      href="/dashboard"
      onNavigate={(e) => {
        // Only executes during SPA navigation
        console.log('Navigating...')

        // Optionally prevent navigation
        // e.preventDefault()
      }}
    >
      Dashboard
    </Link>
  )
}

While onClick and onNavigate may seem similar, they serve different purposes. onClick executes for all click events, while onNavigate only runs during client-side navigation.
Some key differences:

onClick executes with keyboard commands to navigate, but onNavigate won't.
External URLs won't trigger onNavigate.
Links with the download attribute will work with onClick but not onNavigate

👉 Open the Linked page in a new tab

If you want, the following page/coponent will be opened in a new tab. As like <a> tag does with target='_blank' attributes. You can do it with <Link> component in Next.js in the same way.

<div>
   <Link href="/contactus" target='_blank'>
     <button className="px-3 py-2 bg-blue-600 text-white rounded-md">
                Go to Contact us Page
     </button>
   </Link>
</div>

You can also use other target attributes like: _parent, _self, _top

The Link component is very useful in Next.js to navigate different pages in your web application.

Khan Rabiul @khanrabiul