Linguine Code

A guide to navigating with Next JS links

Your Next.JS application may have multiple pages, but now you’re wondering, how do I let a user navigate to my other pages?

You could use an HTML <a /> tag for that.

However, that would make a request to the server and would cause the browser to refresh for the new content.

If your goal is to use client-side navigation, than you must use Next.js’s Link API to support client-side navigation.

Let’s see how to use it.

How to add NextJS link navigation

Adding client side navigation to your NextJS application is extremely simple.

All you need to do is import Next Link React component and use it!

Using Next JS link to navigate to about page

In the main home file, I’m importing the Link component from `next/link`.

In line 7, I’m passing an href property with a value that leads to the about page.

Here’s the output.

Next JS home page

The action to this link happens in the browser, without making request to the server.

How to handle onClick with Next JS links

Sometimes you’ll want to add a click event to the link element. You might think that passing the onClick property onto the Next Link component will work. But it doesn’t!

If you’d like to add a click event handler to your link, you’ll want to attach it to the HTML child element inside the Next link component.

In the example below, I’m using the <a> tag element.

Adding onClick handler using Next JS link

on line 9, notice that I added the onClick property to the HTML link element, and not the Next Link component.

It doesn’t have to be an <a> tag. It may be any other valid, native HTML element.

How to add query params to Next.JS link

Passing queries to a page is extremely helpful when the page template can handle dynamic data.

Passing queries to the next route navigation is really simple too.

Adding query params to Next JS link component

Instead of passing a string to the href property you may pass an object.

That object will need the pathname value that points the route/page you want to point the user to.

The next property to pass in the object is the query key. The query key is a key value object.

The keys represent the param names, and the value will the param value.

How to prefetch pages with Next JS links

Pre-fetching, also known as pre-rendering, can be a very useful technique to give the user a better, and faster experience.

In a nutshell, prefetching will load the next resources (code) to be executed as soon as the user navigates to the next page.

This will save some time of having to wait to load the resources when the user navigates to the new page.

NextJS makes it easy for us to use this technique by passing the prefetch property to the Link element.

Next JS Prefetching resources for the about page

In the example above, this lets the app know to start fetching only the resources that creates the about page.

Addy Osmani wrote a great article on how prefetching works, and how it helps. Check that out if you’re interested.

How to add active classname to Next JS link

Adding an active class name to a link element is a bit complicated, but doable.

To achieve this goal, you’ll need to create a new React component that handles this logic.

Let’s take a look at the example below.

HOC that adds active classname to Next JS link component

In the example above, I’ve created a new React component, and it’s main job is to run a conditional to check if props.href matches the React router pathname.

I achieved this by wrapping the withRouter HOC (higher order component) onto my new LinkElement component.

By using withRouter(), it will toss me the a new property called, router.

The router property will have the data of what active path the user is currently on.

Now that the new Link element has been created, you can import that custom React component instead of the Next Link element.

Here are other Next.JS articles that you might enjoy: