Next.js 中页面之间的链接

在 Next.js 中，页面之间的链接可以通过内置的 <Link> 组件来实现。这个组件会自动使用预取技术，提高网站的性能和用户体验。

使用方法

首先，在需要进行页面跳转的地方引入 Link 组件：

import Link from 'next/link'

然后，使用 Link 组件包装需要跳转的元素（比如按钮、链接、图片等），设置 href 属性为目标页面的路径。

<Link href='/about'>
  <a>About</a>
</Link>

注意，必须使用 <a> 元素包裹 Link 组件，这是因为 <a> 元素才有默认的跳转行为。

如果需要传递数据到目标页面，可以在 href 属性中使用查询参数（query string），也可以使用动态路由参数（dynamic route parameters）。

查询参数

在 href 属性中使用查询参数，可以将数据作为一个键值对的形式传递。比如：

<Link href='/posts?title=hello-world'>
  <a>View Post</a>
</Link>

在目标页面中，可以通过 router 对象获取到这些参数：

import { useRouter } from 'next/router'

function Post() {
  const router = useRouter()
  const { title } = router.query

  return (
    <h1>{title}</h1>
  )
}

动态路由参数

使用动态路由参数可以在路径中添加可变的片段，这些片段会被解析为参数，并且可以通过 router 对象进行获取。比如：

<Link href='/posts/[id]' as='/posts/abc123'>
  <a>View Post</a>
</Link>

在目标页面中，可以通过 router 对象获取到这个参数：

import { useRouter } from 'next/router'

function Post() {
  const router = useRouter()
  const { id } = router.query

  return (
    <h1>{id}</h1>
  )
}

注意，as 属性用于设置浏览器地址栏的显示路径，但实际上访问的是 href 属性中的路径。

预取技术

在 Next.js 中，内置了预取技术，可以在用户浏览页面时自动预取目标页面，提高网站的性能和用户体验。这个功能是由 <Link> 组件自动处理的，你不需要额外进行配置或编码。

总结

Next.js 提供了简单而强大的页面跳转功能，可以通过内置的 <Link> 组件实现。使用这个组件，可以自动实现预取技术，提高你网站的性能和用户体验。