Remove <Link > </Link> tag as compulsory for navigation.

[ChetSocio]

Goals

1. There are places where companies look for normal relaoding redirects that a tag provides
2. When a tag is used, we get error in npm run build , The error states using instead
3. This error shouldnot come as well as we should be free to use a tag whenever needed
4. Also I have seen bugs whenever we deploy to production environment, the next Link component doesnot provide smooth redirecting, it reloads like tag

Non-Goals

1. Need normal links in some place .

Background

We (team of 15 ) are currently working on big ecommerce projects . We see most of our clients love normal reloads on some place whereas smooth redirection on many places. This makes sense and proper use of both and components . Our request is to remove only using restriction in nextjs. React doesnot give such restriction then why nextjs is doing so?

Proposal

Just remove the warning or error your nextjs gives whenever we use tag in our project and run npm run build

[icyJoseph]

Hi,

App Dir

This is very odd, because it is not compulsory, as you say, that'd be weird.

On my personal page I have a couple of a tags, no warning, nor error present.

Even the create-next-app starter code has <a> tags, and it builds and does its thing without problem.

Could it be that you have some custom ESLINT rule that's enforcing this?

What next.js version, or eslint-config-next have you got?

Edit - Pages Dir

I see, the pages directory has that rule!

React doesnot give such restriction then why nextjs is doing so?

Let's not get mixed up here. React is a UI library, I think you might want to say React Router DOM.

Anyway, this is indeed not the best, but it is done to prevent entire page reloads. I am on your side though, like, I might want to just kill the page and do a hard navigation. I think a warning would be ok, but an error... Mmmm

[icyJoseph]

Alright now I know. It is the next/core-web-vitals that enforces this.

• .eslintrc.json

This makes it an error.

{
  "extends": "next/core-web-vitals"
}

With this it becomes a warning.

{
  "extends": "next"
}

And you probably know this, but:

{
  "extends": "next/core-web-vitals",
  "rules": {
    "@next/next/no-html-link-for-pages": "off"
  }
}

Would shut it for good, otherwise:

        {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
        <a href="/about">about</a>

But I don't know if the core-web-vitals objectives align with this request. I think it is best to opt out to use next only, or disable the rule to "off".