Error.invalid json 响应 JSON 中的意外令牌 T 位于位置 0 sanity nextjs typscript答案

【问题标题】：Error.invalid json response Unexpected token T in JSON at position 0 sanity nextjs typscriptError.invalid json 响应 JSON 中的意外令牌 T 位于位置 0 sanity nextjs typscript
【发布时间】：2022-10-24 19:02:44
【问题描述】：

嘿，伙计们，我有一个问题，我使用 react 和 typscript 和 sanity cms 进行了构建，但问题是当我尝试将构建部署到 varcel 时，它一直拒绝它说 FetchError: invalid json response body at https://portfolio2-1-wn3v.vercel.app/api/getExperience reason: Unexpected JSON中的令牌T在位置0，而它在我的本地机器上工作时它会找到所有数据和所有内容......我读到它可能是getStaticProps或获取json时的问题，是的，我确实改变了环境变量从 http 3000 中的 base_url 到 varcel 的，但除此之外我不知道我还能做什么....如果有人遇到过这种错误？这是我的代码

`import {Experience} from '../typings'
export const fetchExperiences = async () =>{
    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/getExperience`)
    const data = await res.json()
    const projects:Experience[] = data.experience

   
    return experience
}`

getExercise.ts 文件包含所有 api 请求

import type{NextApiRequest,NextApiResponse} from 'next'
import {groq} from 'next-sanity';
import {sanityClient} from '../../sanity';
import {Experience} from '../../typings'
const query = groq`
*[_type == "experience"]{
    ...,
    technologies[]->
}
`;
type Data ={
    experience:Experience[]
}
export default async function handler(
    req:NextApiRequest,
    res:NextApiResponse<Data>,
){
    const experience:Experience[]= await sanityClient.fetch(query)
    res.status(200).json(JSON.parse(JSON.stringify({experience})))
}

这是 index.ts 文件的一部分

export const getStaticProps: GetStaticProps<Props> = async() => {
  const experience : Experience[] = await fetchExperiences();
  const skills : Skill[] = await fetchSkills();
  const projects : Project[] = await fetchProjects();
  const socials : Social[] = await fetchSocials();
  return{
    props:{
      experience,
      skills,
      projects,
      socials,
    },
    revalidate:10
  }
}

【问题讨论】：

标签： json next.js

【解决方案1】：

您看到的错误链接 (https://portfolio2-1-wn3v.vercel.app/api/getExperience) 是来自 vercel 的预览部署链接。这意味着，每次部署到 vercel 时，它都会创建此预览链接：https://你的应用名称-（一些独特的部署链接）.vercel.app。

但是，在您的 api 中，您传递了 ${process.env.NEXT_PUBLIC_BASE_URL} 它将在您的本地工作并且可能在生产中工作，但它不会在您的预览部署（暂存）上工作。

为了避免这种情况，不幸的是，您不能只提供/api/getExperience，因为只支持绝对 URL。因此，我建议采用以下方法，避免按照 [nextjs docs][1] 中的建议进行 API 调用：

您在 lib/ 中创建了一个 experience-queries.ts 文件
您在其中添加您的 GROQ 查询
```
export const getExperiences = () => {
  const query = groq`
*[_type == "experience"]{
    ...,
    technologies[]->
}
`;
  return query;
};
```
1. 在 index.ts 中，在 getStaticProps 中调用 getExperiences
```
const experiences = await sanityClient.fetch(getExperiences());
```
注意：在经验（单个项目）和经验（项目列表）之间命名时要小心 -> 如果您打算获得它们，请确保命名。 [1]：https://nextjs.org/docs/basic-features/data-fetching/get-static-props#write-server-side-code-directly

【讨论】：