我想用db中的文章构建一个简单的网站。我的问题是我需要使用服务器来呈现这些文章,并且可以使用Next.js文档中的getInitialProps
函数:https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#getinitialprops-for-older-versions-of-nextjs
目前它可以正常工作,但是我想实现按其ID获取文章,并且我的链接应该像这样:
http://localhost:3000/articles/<some_id>
我已经做到了,但是现在我想读取该ID并将其传递给getInitialProps函数,以仅针对一篇特定文章来调用我的API。我的问题是我不知道如何传递router
道具来从查询和调用API中获取该ID。
import { withRouter } from "next/router";
import fetch from "isomorphic-unfetch";
const Article = ({ router }) => {
console.log(router);
return (
<div>
<h1>Hello World</h1>
</div>
);
};
Article.getInitialProps = async props => {
console.log(props);
const res = await fetch(
`https://admin.jozefrzadkosz-portfolio.pl/articles/${router.query.id}`
);
const articles = await res.json();
return { articles };
};
export default withRouter(Article);
答案 0 :(得分:1)
getInitialProps
作为参数context
对象的对象,它上面有query
。
您应该在那里获取价值。