对于旧版本：< 9.x

您可以使用next/link的as功能：

<Link prefetch as={`/product/${slug}`} href={`/product?slug=${slug}`}>

浏览器上的链接将显示为/product/slug内部映射到/product?slug=slug

您需要有一个用于服务器端映射的自定义服务器：

server.get("/product/:slug", (req, res) => {
  return app.render(req, res, "/product", { slug: req.params.slug })
})

对于 9.x 及更高版本

Next 9.x 支持基于文件系统的动态路由。您不再需要自定义服务器。

Next.js 支持使用基本命名参数创建路由，这是一种由path-to-regexp（支持Express的库）推广的模式。

/product/:slug现在可以通过在 pages 目录中创建一个名为的文件来创建与路由匹配的页面：pages/product/[slug].js.

还支持多个动态 URL 段！

./pages/blog/[blogId]/comments/[commentId].js
./pages/posts/[pid]/index.js

对于迟到的任何人，我们现在在 Next 9 中有动态路由。

这将允许通过使用文件结构来制作这样的 url 结构，而不需要额外的包。

你可以创建一个文件 pages/user/[id].js

和

import { useRouter } from 'next/router'

const User = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>User: {id}</p>
}

export default User

此示例将帮助您定义参数化的命名路由。它使用 nest/routes 并让您定义您的自定义偏好路线。希望它会帮助你。

https://github.com/zeit/next.js/tree/master/examples/with-next-routes

首先导入路由器

import Router from 'next/router'

那么如果你想在 Link 标签中使用它

<Link href={{ pathname: '/about', query: { name: 'Sajad' } }}>

如果你想在函数中或回调之后使用它

Router.push({
    pathname: '/about',
    query: { name: 'Sajad' },
  })