对于任何迟到的人，我们现在有动态路由在未来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

对于旧版本：〈9.x

您可以使用next/link的as特性：

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

浏览器上的链接将显示为/product/slug，内部Map为/product?slug=slug
您需要一个custom server来进行服务器端Map：

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

适用于9.x及更高版本

Next 9.x支持file system based dynamic routing，您不再需要定制服务器。
js支持使用基本命名参数创建路由，这种模式由path-to-regexp（Express的支持库）推广。
现在可以通过在pages目录中创建一个文件来创建与路由/product/:slug匹配的页面，该文件名为：pages/product/[slug].js.
还支持多个动态URL段!

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

首个导入工艺路线

import Router from 'next/router'

然后如果要在Link标记中使用它

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

如果要在函数中或回调后使用它

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

问题：query对象始终为空

• • TL; DR：在第一次渲染时，query为空，Router.isReady为false。在所有后续渲染调用中，一切都恢复正常。**

在最近的版本中，dynamic routing得到了完全的支持。文档甚至展示了一个超级简单的例子来说明它是如何工作的。遗憾的是，由于某些原因，文档没有提到水合作用的重要问题。这篇blog post解释了一些额外的细节。
其要点是：在许多动态呈现场景（包括默认）中，在客户机上的初始呈现期间，页面首先在没有任何参数的情况下被呈现（可能由于水合作用，基于不能考虑动态路径的静态状态）。
溶液
即使router.query为空，也允许组件"稍微工作"，例如：

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

  console.log(`[MyComp render] router.isReady=${router.isReady}, id=${id}`);

  useEffect(() => {
    if (!router.isReady) {
      return;  // NOTE: router.query might be empty during initial render
    }

    doSomethingWithData(id);
  }, [id, router.isReady]);

  if (!router.isReady) {
    // we are still waiting for dynamic data to be available
    return 'loading...';
  }

  return theActualContent;
}

甚至还有一个至关重要的Router.isReady字段，它告诉您查询数据是否可用，但是，由于某种原因，他们没有在Dynamic Routes documentation中提到它。