如何将自定义参数传递给 nextjs 动态路由，以便我可以在 getInitialProps 中访问它

Question

我想将一个 ID 作为自定义参数传递给 next/link <Link /> 并能够在 getInitialProps 中访问它。我想使用干净的 URL，但我使用的 API 只允许您通过帖子 ID 查询它。因此，虽然我可以访问 getInitialProps 中的帖子 slug，但我无法使用它来查询帖子。

我目前已将其设置为在 URL 中使用 post slug

<Link href="/article" as={`/article/${urlPattern}`}>
    <a>{title}</a>
</Link>

在 getInitialProps 中，我可以通过上下文参数访问 slug

Article.getInitialProps = async context => {
    const slug = context.query;
    // need query ID
    // do api call
};

有没有办法可以将 ID 传递给以便我可以通过上下文在 getInitialProps 中访问它来执行我的 API 调用？

** 编辑 **

我通过添加一个允许我通过 context.query.id 访问 id 的查询属性更新了包含文章 ID 的 URL 只是文章名称，但我仍然需要一种方法来访问 getInItialProps 中的文章 ID，所以我进行了 api 调用。

<Link
    href="/article/[article]"
    as={{
        pathname: `/article/${urlPattern}`,
        query: { id: system.id }
    }}
>

Answer 1

您可以将 URL object 传递给 as 属性：

<Link
      href={"/article"}
      as={{
        pathname: "/article",
        query: { id: "query id" }
      }}
    >
      <a>title</a>
    </Link>

有一个例子：https://github.com/zeit/next.js/tree/master/examples/with-url-object-routing