如何在 Next.js 中在新标签页打开链接

在 Next.js 中，要在新标签页打开链接，我们既可以在 INLINECODEbd4beb12 标签（锚标签）中使用 INLINECODEb87d8250 属性，也可以结合使用 Next.js 的 Link 组件与 passHref 属性，以确保在新标签页打开链接的同时正确处理路由。在本文中，我们将完整地探索这两种实现方法。

我们可以通过以下几种方法在 Next.js 中实现新标签页打开链接。

目录

• 使用带有 target="_blank" 的锚标签
• 使用 Link 组件

Next.js 中的 Link 行为

Next.js 提供了一个功能多样的 INLINECODEe01aea99 组件，用于在应用内部进行客户端导航。默认情况下，当用户点击使用 INLINECODE70f0337b 渲染的链接时，Next.js 会在不触发整页刷新的情况下处理导航。这种针对单页应用程序（SPA）优化的行为，通过高效更新 DOM 而无需重新加载整个页面，从而增强了性能。

创建 Next 应用的步骤

第一步： 使用以下命令设置 React 项目：

npx create-next-app new-tab

第二步： 使用以下命令导航到项目文件夹：

cd new-tab

项目结构：

!image

package.json 文件中更新后的依赖项将如下所示：

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.1"
}

方法 1：使用带有 target="_blank" 的锚标签

在这个方法中，我们将在 Next.js 中使用带有 INLINECODEbd6c9232 属性的锚（INLINECODE88f208dd）标签。这种组合确保了当链接被点击时，目标页面会在新的浏览器标签页中打开，从而在浏览时提供流畅的用户体验。

示例： 下面的示例使用带有 target="_blank" 的锚标签 在 Next.js 中打开新标签页。

JavaScript


CODEBLOCK_b98decf4

运行应用程序的步骤： 现在使用以下命令运行应用程序：

npm run dev

输出：

!1

方法 2：使用 Link 组件

在这个方法中，我们将使用 Next.js 的 Link 组件，并结合 INLINECODE306b94b2 属性和 INLINECODEf8b0cdd7，生成一个锚标签（），点击时在新标签页中打开链接。这种方法确保了在新标签页打开链接的同时，能在 Next.js 内部正确处理路由。

npm run dev

!2