Next.JS "Link" vs "router.push()" vs "a" tag

Question

Newbie here, sorry if this is extremely basic question but I'm not able to wrap my head around which technique should be followed to navigate across various pages.

As of now I know three different methods through which I can achieve this:

1. Link component exported by next/link
2. router.push() using useRouter exported ny next/router
3. Simple HTML <a></a>

<Link href="/about"><a>About me</a></Link>
<a href="/about">About me</a>
<button onClick={() => router.push("/about")}>About me</button>

All of the methods work and achieve the same exact thing. I just wanted to know what are the differences, if any, among these approaches. Thank you so much in advance!

Answer 1

router.push

router.push('/push') behaves similarly to window.location. It does not create a <a> tag, which means - if you are concern with SEO, your links will not be detected by crawlers.

<Link>

However, <Link> will create a <a> tag, which means your links will be detected when crawlers scrape your site. Endusers will still navigate with without reloading the page, creating the behavior of a Single Page App.

<a>

<a> tag without using next/link's <Link> creates a standard hyperlink which directs end user to the url as a new page. (standard behavior).

You should be using <Link> throughout all your website, and use router.push for places where you need redirect in order to retain the behaviour of a Single Page App.

Answer 2

Buttons are for actions and links are to go somewhere.

If you are using NextJs, I'm assuming SEO matters to you here.

Consider these before making a decision:

1. router.push() is mostly used in an event handler ( onClick here). This is an action. So let's say you click on the button, then you do some task, and based on the result you take the user to another page. Then you'd want to use router.push() . Don't use it just to go to another page. Note that this is bad for SEO if you want it to be crawled.

2. <Link> does some heavy lifting for you and has a bunch of props that you can pass to customize it. This is what you need most of the time to go to another page. When you are using it, the default browser's behavior to reload the whole page(as you'd see with the <a> tag) is overridden. Crawlers see it as a link to another page, so it's good for SEO.

3. <a> tag is just a plain HTML element, with all the default behaviors. When you use it, a full reload happens. If you are using it, try switching to <Link> . Similar to <Link> it's good for SEO.

Answer 3

In addition to the reasons provided, the <Link> component also includes prefetching. This means all pages linked to by any <Link> s in the viewport or hovered on are loaded in advance, ready to be displayed when clicked on.

Answer 4

All other answers have pointed out the characteristics of each approach, especially how it affects your SEO.

One thing to note though, using <Link> does not always automatically create <a> tag.

Under the hood, <Link> only creates <a> tag if you pass a string as the children. Passing all other elements such as <div> , except <a> , will not create <a> tag to wrap your underlying component. Next/Link will just use Next/Router to do imperative routing when such scenario happens, thereby does not give any benefit SEO-wise.

source code