Next.js : <Link> vs <a> (Client-side navigation)

The <Link> and <a> components in Next.js are both used to create hyperlinks, but they have some key differences.

The <Link> component is a React component that extends the HTML <a> element. It provides a number of features that are not available in the <a> element, such as:

• Client-side navigation: The <Link> component can be used to perform client-side navigation, which means that the page will not be reloaded when the link is clicked. This can improve the performance of your application.
• Prefetching: The <Link> component can be used to prefetch the next page, which means that the page will be loaded in the background before the user clicks the link. This can improve the user experience by reducing the perceived loading time. In other words, if <Link> component is used, when Link component is exposed in Viewport, chunk of page connected by href is loaded.
• SEO: The <Link> component is SEO-friendly, which means that search engines will be able to index the links on your pages. This can help your pages to rank higher in search engine results pages (SERPs).

The <a> element is a standard HTML element that does not provide any of the features of the <Link> component. However, the <a> element can be used to create links that work in all browsers, including browsers that do not support Next.js.

 

In general, you should use the <Link> component whenever possible. However, if you need to create a link that works in all browsers, then you can use the <a> element.

 

Here is a table that summarizes the key differences between the <Link> and <a> components:

Feature	<Link>	<a>
Client-side navigation	Yes	No
Prefetching	Yes	No
SEO-friendly	Yes	No
Works in all browsers	No	Yes

 

Client-side navigation

Unlike moving by directly hitting the url in the browser, replacing the page component on JS. Only the JS parts that need to be changed are reloaded. Not all reloaded.

 

🚨 Precautions when using

When connecting to an external link from this service, only <a> is required.

When giving a style to a link component, it must be given to an internal tag.