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"
}
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