使用带有 NextJS 的 getServerSideProps 生成多个页面

Posted 2023-03-30

【中文标题】使用带有 NextJS 的 getServerSideProps 生成多个页面

【英文标题】：Generate multiple pages using getServerSideProps with NextJS

【发布时间】：2021-11-17 14:51:12

【问题描述】：

我的演示 API 将返回

[
  
    title: "First article",
    id: "1"
  ,
  
    title: "Second article",
    id: "2"
  
]

我想为每个人创建一个页面。

组件将被放置在pages/articles/[id].js

我的组件将如下所示

function Article(props) 
  console.log(props)
  return <div>...</div>


export async function getServerSideProps(context) 
  const res = await fetch("https://.../articles");
  const data = await res.json()

  if (!data) 
    return 
      notFound: true,
    
  

  return 
    props:  data 
  

这将创建一个页面，但将整个提要作为道具。 如何为每个对象创建一个页面？

https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering 这只是告诉我如何为单篇文章创建唯一页面

【参考方案1】：

我的解决方案：

export async function getServerSideProps(context) 
  const articleId = context.query.id;
  const res = await fetch("https://.../articles");
  const articles = await res.json();

  const [article] = articles.filter((article) => article.id === articleId);

  return 
    props:  article ,
  ;