Why use <a> tag instead of <Link> ?

[patelvivekdev]

In app/page.tsx

function BlogLink({ slug, name }) {
  return (
    <div className="group">
      <a
        href={`/blog/${slug}`}
        className="flex w-full items-center justify-between rounded border border-neutral-200 bg-neutral-50 px-3 py-4 dark:border-neutral-700 dark:bg-neutral-800"
      >
        <div className="flex flex-col">
          <p className="font-medium text-neutral-900 dark:text-neutral-100">
            {name}
          </p>
          <Suspense fallback={<p className="h-6" />}>
            <Views slug={slug} />
          </Suspense>
        </div>
        <div className="transform text-neutral-700 transition-transform duration-300 group-hover:-rotate-12 dark:text-neutral-300">
          <ArrowIcon />
        </div>
      </a>
    </div>
  );
}

[XahidEx]

Use the <a> tag in Next.js when linking to external URLs or when you need to include attributes like target="_blank". The <Link> component is used for internal navigation within the app to benefit from client-side routing and performance optimizations.

[leerob]

^ Exactly!

[shahriarshafin]

Thanks for the explanation! I noticed in the Next.js docs that attributes like className and target="_blank" can be passed directly to the component and applied to the underlying tag. Is it still a better choice to use over for external URLs?

https://nextjs.org/docs/app/api-reference/components/link#reference