Next.js 中的 Link 组件是什么？

在本文中，我们将学习 Next.Js 的 Link 组件。按照以下步骤在 Next.js 应用程序中添加 Link 组件。

链接组件：链接是 Next.js 中的组件之一。它用于在 Next.js 应用程序中的页面之间创建链接。要创建链接，请将 组件插入页面，并指定要链接到的页面的路径。

组件还具有以下属性：

• href：要链接到的页面的路径。
• rel：链接的类型。可能的值为“外部”、“内部”或“无”。
• 标题：链接的标题。
• active：链接是否处于活动状态。

创建 NextJs 应用程序：

第 1 步：要创建一个新的 NextJs 应用程序，请在终端中运行以下命令：

npx create-next-app GFG

第 2 步：创建项目文件夹（即 GFG ）后，使用以下命令移动到该文件夹：

cd GFG

项目结构：它看起来像这样。

示例：在 Next.Js 中添加链接。要首先使用链接组件，我们将使用以下内容创建一个新文件名“first.js”。

first.js

// Importing the Link component
import Link from 'next/link'
  
export default function first() {
    return (
        

            This is the first page.
            

            {/* Adding the Link Component */}
            
            Go to Homepage
            
        
    )
}

index.js

// Importing the Link component
import Link from 'next/link'
  
export default function Homepage() {
    return (
        

            This is the Homepage page - GeeksforGeeks
            

            {/* Adding the Link Component */}
            
            Go to first page
            
        
    )
}

在这里，我们首先从“next/link”导入我们的 Link 组件。然后我们使用这个组件在页面之间导航。

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm run dev

输出：这将为您的 Next.Js 应用程序启动开发服务器。