How to open a link in a new Tab in NextJS?
Opening a link in a new tab in Next.js consists of using either the target=”_blank” attribute in an anchor (<a>) tag or using Next.js’s Link component with the passHref prop to ensure proper handling of routing while opening the link in a new tab. In this article, we will explore both these approaches with complete implementation.
Table of Content
- Link Behavior in Next.js
- Using Anchor Tag with target=”_blank”
- Using Link Component with passHref Prop
Link Behavior in Next.js
Next.js provides a versatile <Link>
component for client-side navigation within your application. By default, when a user clicks on a link rendered using <Link>
, Next.js handles the navigation without triggering a full page reload. This behavior is optimized for single-page applications (SPAs) and enhances performance by efficiently updating the DOM without reloading the entire page.
Steps to Create the Next App
Step 1: Set up React Project using the Command:
npx create-next-app new-tab
Step 2: Navigate to the Project folder using:
cd new-tab
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.1"
}
Approach 1: Using Anchor Tag with target=”_blank”
In this approach, we’re using an anchor (<a>) tag with the target=”_blank” attribute in Next.js. This combination ensures that when the link is clicked, the destination page opens in a new browser tab, providing a seamless user experience while browsing.
Example: The below example uses Anchor Tag with target=”_blank” to open a link in a new Tab in NextJS.
// src/app/page.js
"use client";
import React from 'react';
const NewTabLink = () => (
<>
<h1>Using Anchor Tag with target="_blank"</h1>
<a href="https://w3wiki.net"
target="_blank" rel="noopener noreferrer">
Open in New Tab
</a>
</>
);
export default NewTabLink;
Step to run the application: Now run the application with the below command:
npm run dev
Output:
Approach 2: Using Link Component with passHref Prop
In this approach, we are using Next.js’s Link component with the passHref prop and legacyBehavior to generate an anchor tag (<a>) that opens the link in a new tab when clicked. This method ensures proper handling of routing within Next.js while opening the link in a new tab.
Example: The below example uses Link Component with passHref Prop to open a link in a new Tab in NextJS.
//src/app/page.js
"use client";
import React from 'react';
import Link from 'next/link';
const NewTabLink = () => (
<>
<h1>Using Link Component with passHref Prop</h1>
<Link href="https://w3wiki.net" passHref legacyBehavior>
<a target="_blank">
Open in New Tab
</a>
</Link>
</>
);
export default NewTabLink;
Step to run the application: Now run the application with the below command:
npm run dev
Output: