Difference between normal links & tag links in Next.js

Today in this blog we will talk about the effect of using "a" tag & "Link" tag in Next.js. Are they really different from each other?
Sure they are, let me explain.

Normal Links

When you use normal links like this:

<a href="./users">Click Here</a>

every time that you click the link and navigate to other pages, you call a request to all the files and all of them will download again. That's something we don't want of course. so look at this folder structure that I have to understand better:

In this structure, as you can see in my app folder I have a page.tsx file and a folder named "folder" that contains F1.tsx.
In the page file, I have below code that is just a simple page:

import React from "react";

async function page() {
  return (
    <div className="p-[1rem]">
      <h1>Hello World</h1>
    </div>
  );
}

export default page;

And in the F1 file, I have this code that as you see it's just a simple button with "a" tag in it:

import Link from "next/link";
import React from "react";

function F1() {
  return (
    <button className="py-[0.5rem] px-[2.5rem] bg-gray-800 rounded-[0.75rem]">
      <a href="/users" className="text-white">
        click
      </a>
    </button>
  );
}

export default F1;

When you click that "a" tag you will navigate to the user's file page and everything should work fine. But let's open the Network tab real quick.

It's normal, right? we have all the necessary files in here.
OK now clear the Network log and click the button to navigate to the user page:

By clicking the button we go to "http://localhost:3000/users" & this is our Network log:

As I told you we redownloaded all the unnecessary files again. and we don't want that. So what is the solution?

Tag Links

Simple, we are just going to use "Link" instead of "a" tag. Like this:

import Link from "next/link";
import React from "react";

function F1() {
  return (
    <button className="py-[0.5rem] px-[2.5rem] bg-gray-800 rounded-[0.75rem]">
      <Link href="/users" className="text-white">
        click
      </Link>
    </button>
  );
}

export default F1;

Now again open the Network tab, we have our files downloaded once. Click clear log like before and navigate to the F1 file using the button. Now if you see the log we just downloaded our necessary files and not all of the files again.

So to wrap up by using the "a" tag we download all the files again & again but with the "Link" tag we just download all the files once and on every page we just download what we need.

This small change may not seem handy but in the big projects, it will help you build a website or app with better performance and of course a faster one!
If this blog helped you please like and also feel free to share ANY opinion in the comments section. Thanks for reading🙏.