Netlify部署后Sanity博客页面无法渲染的解决咨询

结合你的代码和线上环境的表现，以下是针对性的修复方案：

1. 补全Sanity API版本号 #

你的getServerSideProps中apiVersion是占位符，Sanity要求必须指定有效格式的API版本（格式为YYYY-MM-DD），线上环境缺失该配置会直接导致请求失败。

修改两个页面getServerSideProps中的客户端配置：

const client = createClient({
    projectId: "你的项目ID",
    dataset: "production",
    apiVersion: "2024-01-01", // 替换为当前日期或最近的有效日期
    useCdn: false
});

2. 优化详情页的GROQ查询 #

直接拼接slug到查询字符串存在注入风险，且可能因特殊字符导致查询匹配失败，改用参数化查询：

// 替换详情页getServerSideProps中的query定义
const query = `*[_type == "blog" && slug.current == $slug][0]`;
const blog = await client.fetch(query, { slug }); // 通过参数传递slug

3. 修复详情页的日期渲染逻辑 #

详情页的useEffect依赖数组为空，当blog异步加载完成后不会重新执行，导致日期无法正确初始化：

useEffect(() => {
  if (blog?.createdAt) {
    const date = new Date(blog.createdAt);
    setDate(date);
  }
}, [blog]); // 添加blog作为依赖项

4. 验证Sanity CORS配置细节 #

确认Sanity控制台的CORS设置：

• 允许的Origin：必须精确添加https://abhirupkumar.netlify.app（包含https协议，不要末尾斜杠）
• 允许的方法：勾选GET
• 允许凭证：勾选「Allow credentials」选项

5. 统一Sanity客户端配置（可选但推荐） #

在项目根目录创建sanity/client.js，统一管理客户端配置，避免重复代码：

import { createClient } from 'next-sanity';

export const client = createClient({
  projectId: "你的项目ID",
  dataset: "production",
  apiVersion: "2024-01-01",
  useCdn: false,
});

之后在两个页面中直接导入使用：

import { client } from '../sanity/client'; // 路径根据实际项目结构调整

为什么本地正常但线上异常？ #

本地开发环境存在缓存机制，且Sanity对本地请求的验证逻辑更宽松；而Netlify线上环境无本地调试缓存，对API版本、请求格式的要求更严格，缺失必要配置会直接触发请求失败。

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