Link 组件

在网站页面间建立链接时，通常会使用 <a> HTML 标签。

在 Next.js 中，您可以使用 next/link 提供的 Link 组件来实现应用内的页面跳转。<Link> 支持客户端导航 (client-side navigation) 并接受多种 props，这些属性可让您更精细地控制导航行为。

使用 <Link>

首先打开 pages/index.js 文件，在顶部添加以下导入语句：

import Link from 'next/link';

然后找到如下所示的 h1 标签：

<h1 className={styles.title}>
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

将其修改为：

<h1 className={styles.title}>
  阅读 <Link href="/posts/first-post">这个页面！</Link>
</h1>

接着打开 pages/posts/first-post.js 文件，将其内容替换为：

import Link from 'next/link';
 
export default function FirstPost() {
  return (
    <>
      <h1>第一篇博文</h1>
      <h2>
        <Link href="/">返回首页</Link>
      </h2>
    </>
  );
}

如您所见，Link 组件的使用方式与 <a> 标签类似，但需要使用 <Link href="…"> 替代 <a href="…">。

注意： 在 Next.js 12.2 版本之前，Link 组件必须包裹 <a> 标签，但 12.2 及以上版本不再有此要求。

现在让我们检查效果。您应该在两个页面上都看到链接，可以自由往返跳转：