Nextjs 中使用 getServerSideProps 进行动态路由
Posted
技术标签:
【中文标题】Nextjs 中使用 getServerSideProps 进行动态路由【英文标题】：Dynamic routing with getServerSideProps in Nextjs 【发布时间】：2020-07-28 01:38:30 【问题描述】：我正在努力学习 nextjs。正在努力使用getServerSideProps 解决路由问题。
使用免费的 API，我在 DOM 上显示了一个国家列表。我想动态链接到某个国家/地区，然后获取并显示该特定国家/地区的数据。
这是我目前的代码
const Country = props => (
<Layout>
<h1>props.country.name</h1>
<span>props.country.capital</span>
</Layout>
);
export async function getServerSideProps(context)
const id = context.query;
const res = await fetch(`https://restcountries.eu/rest/v2/name/$id`);
const country = await res.json();
console.log(`Fetched place: $country.name`);
return props: country ;
export default Country;
<div className='container'>
<Head>
<title>Countries List</title>
<link rel='icon' href='/favicon.ico' />
</Head>
<Layout>
<main>
<h1>
Countries' '
<span role='img' aria-label='world emoji'>
????
</span>
</h1>
<ul>
countries.map(country => (
<li key=country.name>
<Link href='/p/[id]' as=`/p/$country.name`>
<a>country.name</a>
</Link>
</li>
))
</ul>
</main>
</Layout>
</div>
);
export async function getServerSideProps()
// Call an external API endpoint to get posts.
const res = await fetch('https://restcountries.eu/rest/v2/all');
const countries = await res.json();
// By returning props: posts , the Blog component
// will receive `posts` as a prop at build time
return
props:
countries,
,
;
export default Home;
URL 动态路由正常。例如，当您单击阿富汗时，URL 会显示http://localhost:3000/p/Afghanistan。
我的国家组件没有显示任何内容，undefined 被打印到终端。
URL 示例和来自 URL 的响应：https://restcountries.eu/rest/v2/name/Afghanistan
name: "Afghanistan"
如果有菜鸟问题，我们深表歉意。努力学习nextjs
【问题讨论】：
【参考方案1】：export async function getServerSideProps(context)
const id = context.query;
const res = await fetch(`https://restcountries.eu/rest/v2/name/$id`);
const country = await res.json();
console.log(`Fetched place: $country.name`);
return props: country ;
你正在从上面的函数返回一个嵌套对象
props: country:country
所以这个道具会像这样附加到道具上：
`props.props`
这就是你应该如何实现
const Country = props => (
<Layout>
<h1>props.props.country.name</h1>
<span>props.props.country.capital</span>
</Layout>
);
更新
在 next.js 的早期版本中，我认为在版本 9 之后更新，我们没有使用 props 从服务器端函数返回。截至目前，正确的实施方式是
return
props:
countries,
,
;
【讨论】：
如果它对任何人有帮助，这个回复是完全不正确的——尽管它可能已经过时了。在 2020 年 next 的 getServerSideProps 要求您返回一个包含关键字 props 的对象，以便您的 props 进入与它一起导出的组件中。 好吧，我不完全确定你说的是真的，我的陈述基于（a）下一个 js 文档中明确说明的内容，以及（b）我的工作自己的代码.... 标题指的是 getServerSideProps ...... OP 是 getServerSideProps ......你自己的答案是 getServerSideProps ......我的评论是关于 getServerSideProps ......那你为什么现在谈论 getInitialProps ？ ?!! （虽然我也想说它们不一致，因为它们都在同一框架内提供非常相似的功能，但这可能与向后兼容性有关）【参考方案2】：只是为了添加到接受的答案，您还可以解构以使其（恕我直言）更具可读性。这完全是可选的
const Country = ( country ) => (
<Layout>
<h1>country.name</h1>
<span>country.capital</span>
</Layout>
);
【讨论】：
【参考方案3】：您处理页面动态路由的方式没有任何问题。问题是 API 返回的数据是一个 array，但您的代码期望它是一个 object。您可以从数组中检索第一项并将其从getServerSideProps 传递给组件。
export async function getServerSideProps(context)
const id = context.params; // Use `context.params` to get dynamic params
const res = await fetch(`https://restcountries.com/v2/name/$id`); // Using `restcountries.com` as `restcountries.eu` is no longer accessible
const countryList = await res.json();
const [country] = countryList; // Get first item in array returned from API
return props: country ;
const Country = ( country ) =>
console.log(country);
return (
<>
<h1>country.name</h1>
<span>country.capital</span>
</>
);
;
export default Country;
【讨论】：
以上是关于Nextjs 中使用 getServerSideProps 进行动态路由的主要内容，如果未能解决你的问题，请参考以下文章
NextJS - 无法在 Tailwind CSS 中使用自定义颜色
Nextjs 中使用 getServerSideProps 进行动态路由
如何在客户端 NextJS 中使用 Apollo GraphQL 订阅？