How to use the Next Link Component in Next.js?
Last updated on August 10, 2022
Next.js provides a next link component that links the pages internally without reloading the pages. Next.js also supports anchor tags, which can be used as well.
The next link component does not reload the page, it gets the page internally or through JavaScript. In other words, it is called client-side reload. It is much faster than browser reload.
However, the anchor tag reloads the page and one of its identification is a spinner that can be seen in the Chrome browser. That’s the main difference between the anchor tag and the next link component.
In this article, we will learn how to use the next link component, let’s start it. Here we skip the installation process of Next.js.
In the first step, import the next link component with the following script,
import Link from 'next/link'Once it is imported, the Link can be used. It accepts many props, href is one of them where the target page URL can be passed.
<Link href='/about'>About</Link>The above script links to the about page of the project. Next.js allows linking external pages or outside of the application, for that anchor tag can be used instead of the Link component.
<a href='http://coderadvise.com/’>Programming Tutorials</a>Next.js keeps the application faster, therefore it does not load all the linked pages when the index page renders. It means applications would be faster even if would have many pages.
Next Link Component Prefetch Prop
The next Link component has an awesome prop that is prefetch, it fetches the page in the background. It means when the index or home page renders, the next link’s prefetch prop works on loading linked pages in the background.
It accepts boolean, which means it can be disabled by passing false, below is an example
<Link href='/about' prefetch={false}>About</Link>The above prop would not allow to download or prefetch the about page in the background.
Next.js does not allow it to pass true, it is deprecated. So by default, every next link component has a prefetch prop with a true value.
How to Add an Active Class to the Next Link Component?
Usually, web applications show an active page by highlighting its link in the navbar. It is also easily doable in the next link component. HTML unordered list element helps to make this possible.
<ul>
<li><Link href='/'>Home</Link></li>
<li><Link href='/about'>About</Link></li>
</ul>
In the first step, we applied an HTML unordered list element to the next link component. Then we import react hook useRouter into the application.
import { useRouter } from 'next/router'The useRouter hook helps to identify the current page of the application. It is accessible anywhere inside the function and component.
const appRoute = useRouter();Here appRoute constant would save all objects from useRouter() hook. It is before the return statement of the component or function.
<li class={appRoute.pathname == "/about" ? "active" : ""}>
<Link href='/about'>About</Link>
</li>
appRoute has a pathname object that returns the current page route or name. We have used this object inside the class attribute using the ternary operator.
Javascript’s ternary operator would check if appRoute.pathname value is equivalent to /about then it would return the active class into the class attribute. In this way, the current page would be highlighted or active.
How to Open a Link in a New Tab in the Next js?
In the Next js anchor tag is allowed and its next link component has a few similar properties, the target attribute is one of them. Target attribute open link in a new tab when its value is set to _blank.
<Link href='/about' target="_blank" >About</Link>In the above example, the page would be open into a new tab.
Related Posts
- 1. Pre-Rendering in Next.js
- 2. How to use State Management in Next JS Framework?
- 3. How to Setup and Install a Next.js 12 App on Windows 10?
- 4. Next.JS Features and its Benefits