Next.js pretty seo url传递查询参数

我有一个产品页面，路径为

product/[id]/index.js

。我想“美化”的搜索引擎优化目的的产品网址。我希望url看起来像

product/usb鼠标黑色

而不是

product/121122-001

我需要传递查询ID来填充产品详细信息

slug=usb鼠标黑色

  <Link as={`/reservas/${slug}`} href={{pathname: `/product/[id]`, query: {id: idkey}}}>
    <Button disableElevation size="small" className={classes.button} variant="contained" color="primary" onClick={(event) => { return true }}>Solicitar Disponibilidax</Button>
  </Link>

---

目前获得的是

usb鼠标黑色

作为ID，而不是

121122-001

我只是以最简单的形式使用

链接

：

{return true}}>requestar Disponibilidax

---

请记住，

/reservas/[id]/index.js

与

/reservas/[id].js相同。js

无需进一步配置

最好在

product/[id]/index.js

上解析产品名称，而不是在

链接

标记中指定。它将改善谷歌和其他搜索引擎中的SSO效果

const { slug } = router.query
const id = parseSlugToId(slug);

如果您仍然喜欢自己的方式，请尝试以下方法：

<Link as={`/product/${slug}`} href={`/product/${idkey}`}>{ /* your code goes here */</Link>

{/*您的代码在这里*/

以及如何传递参数？我不确定我是否遵循了。我在您的问题中找到的唯一参数是

idkey

。idkey已经在url中了感谢您的跟进！我不想在url中显示产品id。我不想显示

xxx.com/121122-001

，我想显示产品的描述性标题，例如：

xX.COM/USB鼠标黑色< /代码>并将ID发送到重定向页面，这样我就可以填充产品细节，知道如何实现这个目标吗？如果目标是隐藏用户的产品ID，你可以使用<代码>作为< /代码>属性来发送一个更漂亮的URL。如果目标是SEO，你应该考虑保存<代码> SLUG <代码>到DB。o您可以发送slug并将其用作获取记录的键，而不是id。
<Link as={`/product/${slug}`} href={`/product/${idkey}`}>{ /* your code goes here */</Link>