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

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

组件还具有以下属性：
  • href：要链接到的页面的路径。
  • rel：链接的类型。可能的值为“外部”、“内部”或“无”。
  • title：链接的标题。
  • active：链接是否处于活动状态。

创建 NextJs 应用程序：

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

npx create-next-app GFG

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

cd GFG

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

Example: Adding Link in Next.Js. To use the link component first we are going to create one new file name ‘first.js’ with the below content.

  • first.js

import Link from 'next/link'

export default function first() {

    return (

        <div>

            This is the first page.

            <br/>

            {``}

            <Link href=``"/"``>

            <a><button>Go to Homepage</button></a>

            </Link>

        </div>

    )

}

  • index.js

import Link from 'next/link'

export default function Homepage() {

    return (

        <div>

            This is the Homepage page - GeeksforGeeks

            <br/>

            {``}

            <Link href=``"/first"``>

            <a><button>Go to first page</button></a>

            </Link>

        </div>

    )

}

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

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

npm run dev

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

“这门课程充满了令人惊叹且组织良好的内容！本课程基于项目的方法可以更好地更快地理解概念。此外，现场课程的讲师非常优秀且知识渊博。”- Tejas |德意志银行

通过我们改进的全栈开发计划：掌握 Node.js 和 React，使您能够创建动态 Web 应用程序。

因此，只有参加我们的全栈开发课程才能为加薪做好准备。