Next.js 链接到动态路径

在使用 Next.js 进行开发时，我们常常需要链接到动态路径，比如我们需要链接到某一个博客文章的详情页，或者链接到某一个用户的个人详情页等等。为了方便处理这种情况，Next.js 提供了一种特殊的文件命名方式，即以方括号包裹变量名的方式来定义动态路径，如：[id].js。

创建动态路径页面

我们可以在 Next.js 项目的 pages 目录下创建一个名为 [id].js 的文件，来创建一个动态路径页面。这个页面的文件名中包含了一个 id 变量，这个变量可以在页面代码中进行使用。

// pages/[id].js

import { useRouter } from 'next/router'

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

  return (
    <div>
      <h1>Post: {id}</h1>
    </div>
  )
}

在页面代码中，我们使用 useRouter 来获取路由对象，并从路由对象的 query 属性中获取 id 变量的值，然后将其渲染到页面中。

链接到动态路径页面

我们可以使用 Link 组件来生成链接到动态路径页面的链接。我们需要指定动态路径页面的文件名，以及动态路径中的变量值，这个变量值可以通过在 as 属性中进行设置。

// pages/index.js

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <Link href="/posts/[id]" as="/posts/1">
        <a>Go to post 1</a>
      </Link>
    </div>
  )
}

在上面的例子中，我们使用 Link 组件链接到了动态路径页面 /posts/[id]，并在 as 属性中指定了 id 变量的值为 1。这样生成的链接就是 /posts/1。

总结

通过使用 Next.js 的动态路径功能，我们可以方便地创建和链接到动态路径页面。在实际开发中，我们经常需要处理动态路径，这个功能十分实用。