How to Properly Use Next.js <Link> with target="_blank"

Next.js provides the <Link> component for client-side navigation, improving performance by enabling prefetching and reducing full-page reloads. However, when linking to an external website and wanting to open it in a new tab, there are a few important considerations to keep in mind.

Basic Usage of <Link> with target="_blank"

By default, <Link> in Next.js does not include target="_blank", so if you want your link to open in a new tab, you need to add it manually:

import Link from "next/link";

<Link href="https://corner.buka.sh" target="_blank" rel="noopener noreferrer">
  Go to Corner
</Link>

Why rel="noopener noreferrer" is Important?

When using target="_blank", you should always include rel="noopener noreferrer" for security reasons:

• noopener: Prevents the new tab from gaining access to the window.opener property. This protects your site from potential malicious scripts that could manipulate your page.
• noreferrer: Ensures that the Referer header is not sent to the new page, preventing it from knowing where the user came from.

Disabling Next.js Prefetching for External Links

By default, Next.js prefetches pages linked with <Link> only if they point to an internal Next.js route. However, in some cases, you may find that Next.js tries to preload an external link, causing unnecessary network requests or even CORS errors in your console.

To disable prefetching explicitly, you can use prefetch={false}:

<Link href="https://corner.buka.sh" target="_blank" rel="noopener noreferrer" prefetch={false}>
  Go to Corner
</Link>

Alternative: Using <a> Instead of <Link>

If you are linking to an external website, you don't actually need to use <Link>. Instead, using a normal <a> tag is often the better choice:

<a href="https://corner.buka.sh" target="_blank" rel="noopener noreferrer">
  Go to Corner
</a>

This ensures that Next.js does not attempt to prefetch or optimize the link in any way, making it behave like a standard HTML anchor.

Other Considerations

1. Opening in a New Tab from a Button Click

If you don’t want to use a traditional anchor tag but still need to open a new tab, you can use JavaScript instead:

<button onClick={() => window.open("https://corner.buka.sh", "_blank", "noopener,noreferrer")}>
  Open in New Tab
</button>

2. Ensuring Accessibility (aria-label)

For better accessibility, it’s a good idea to add an aria-label to describe the action:

<Link href="https://corner.buka.sh" target="_blank" rel="noopener noreferrer" aria-label="Open Corner in a new tab">
  Go to Corner
</Link>

Finally

Using <Link> with target="_blank" in Next.js requires some security and performance considerations. The key takeaways are:

✅ Always add rel="noopener noreferrer" to prevent security risks. ✅ Disable prefetch={false} if Next.js aggressively tries to preload an external link. ✅ Consider using a normal <a> tag for external links to avoid unnecessary Next.js optimizations. ✅ Use JavaScript (window.open) if you need more flexibility in handling new tabs. ✅ Improve accessibility with aria-label.

By following these best practices, you can ensure that your external links open safely and efficiently without unwanted behavior. 🚀

Support Us