Next.js 13.2实验性app目录下Sanity替代getStaticProps的失效问题

你的核心问题在于getPhotos函数的返回格式错误——你沿用了Pages Router中getStaticProps的返回结构，但Next.js 13 App Router的组件直接调用异步数据函数时，不需要这种包裹格式。

具体问题 #

• getPhotos函数最后返回{ props: { chinaData } }，这是Pages Router专属的数据返回格式
• 在App Router的页面组件里，await getPhotos()得到的是这个完整的对象，而非里面的chinaData数组，导致后续渲染无法获取实际数据

修复代码 #

修改getPhotos函数，直接返回获取到的原始数据即可：

import { createClient } from "next-sanity";

export default async function Home() {
  const chinaData = await getPhotos();

  console.log(chinaData); // 现在会输出实际的Sanity数据数组

  return <main>
    {/* 示例渲染逻辑，可根据需求调整 */}
    {chinaData.map(item => (
      <div key={item._id}>
        <h3>{item.caption}</h3>
        <p>{item.description_short}</p>
      </div>
    ))}
  </main>;
}

const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: "2023-03-17",
  useCdn: false,
});

async function getPhotos() {
  const query = `*[_type == "china"]{
    _id, // 建议添加作为渲染时的唯一key
    alternative_text,
    caption,
    date,
    description_long,
    description_short,
    hashtags,
    location,
    photo
  }`;

  const chinaData = await client.fetch(query);
  console.log(chinaData);
  return chinaData; // 直接返回数据，无需包裹props结构
}

额外检查点 #

1. 确认.env.local中已正确配置NEXT_PUBLIC_SANITY_PROJECT_ID和NEXT_PUBLIC_SANITY_DATASET，且重启过开发服务器
2. 检查Sanity Studio中存在_type为china的文档
3. 确保查询语句中的字段名与Sanity Schema定义的字段完全匹配

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