最新Next.js服务端数据获取问题：getStaticProps返回undefined

一、检查getStaticProps的请求逻辑 #

确保你的请求代码正确处理异步流程、响应解析和错误兜底，常见错误点及修正示例：

export async function getStaticProps() {
  try {
    const res = await fetch('http://127.0.0.1:8000/api/campaigns');
    // 校验响应状态
    if (!res.ok) throw new Error(`请求失败: ${res.status}`);
    
    const data = await res.json();
    // 适配DRF默认分页结构（数据在results字段），未分页则直接取data
    const campaigns = data.results || data;

    return {
      props: { campaigns },
      revalidate: 60 // 可选，设置静态内容自动刷新时间
    };
  } catch (err) {
    console.error('数据获取失败:', err);
    // 出错时返回空数组，避免后续map报错
    return { props: { campaigns: [] } };
  }
}

二、确认DRF API的数据结构 #

直接访问API查看返回格式：

• 若返回分页结构（如{count: x, results: [...]}），必须取data.results作为数组；
• 若返回纯数组（[...]），则直接使用data即可。
  如果误将分页对象当作数组传递给组件，调用map时必然触发“Cannot read properties of undefined”错误。

三、给组件参数设置默认值 #

在页面组件中为campaigns设置默认空数组，即使getStaticProps出错也能避免报错：

export default function Home({ campaigns = [] }) {
  return (
    <div>
      {campaigns.map(campaign => (
        <div key={campaign.id}>{campaign.name}</div>
      ))}
    </div>
  );
}

四、排查环境与访问权限 #

• 确认DRF的ALLOWED_HOSTS配置包含127.0.0.1或设为['*']（开发环境）；
• 若使用容器化部署，需将请求URL替换为DRF服务的容器IP或服务名，避免localhost访问不到。

五、核对Next.js页面文件规则 #

• 若使用Page Router（Next.js 12及以下），getStaticProps必须放在pages/目录下的页面文件中，且与默认导出的组件同级；
• 若使用App Router（Next.js 13+），需改用Server Components直接fetch或generateStaticParams，原getStaticProps逻辑不再适用。

内容的提问来源于stack exchange，提问作者victor