Next.js应用程序使用sanity，
我尝试了这么多东西，但没有一个对我有效，每个组件都是导出的，导入也是正确的。执行npm run build应用程序时出现以下错误
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11457:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async fetchPageInfo (/vercel/path0/.next/server/pages/index.js:1280:17)
at async getStaticProps (/vercel/path0/.next/server/pages/index.js:1196:22)
> Export encountered errors on following paths:
/字符串
- 以下是我的env
NEXT_PUBLIC_SANITY_DATASET=
NEXT_PUBLIC_SANITY_PROJECT_ID=
NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_SANITY_API_VERSION=
NEXT_PUBLIC_SANITY_API_TOKEN=型
- 健全的客户
import {createClient} from 'next-sanity'
import imageUrlBuilder from '@sanity/image-url'
import { SanityImageSource } from "@sanity/image-url/lib/types/types";
export const config = {
projectId : process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
dataset : process.env.NEXT_PUBLIC_SANITY_DATASET,
apiVersion : process.env.NEXT_PUBLIC_SANITY_API_VERSION,
useCdn: true
};
export const client = createClient(config);
const builder = imageUrlBuilder(client);
export function urlFor(source: SanityImageSource) {
return builder.image(source)
}型
- API在pages/API文件夹中创建，并使用fetch函数在utils文件夹中单独侦听，一切都在本地正常工作
- 以下是index.ts
import { Inter } from 'next/font/google'
import Head from 'next/head'
import Header from '../components/Header'
import Hero from '../components/Hero'
import About from '@/components/About'
import WorkExperience from '@/components/Experience'
import SkillsComp from '@/components/Skills'
import ProjectsComp from '@/components/Projects'
import ContactMe from '@/components/ContactMe'
import Link from 'next/link'
import { motion } from 'framer-motion'
import { Experience, PageInfo, Projects, Skills, Social } from '@/typing'
import { GetStaticProps } from 'next'
import { fetchPageInfo } from '@/utils/fetchPageInfo'
import { fetchExperience } from '@/utils/fetchExperience'
import { fetchProjects } from '@/utils/fetchProjects'
import { fetchSkills } from '@/utils/fetchSkills'
import { fetchSocials } from '@/utils/fetchSocials'
const inter = Inter({ subsets: ['latin'] })
type Props = {
pageInfo: PageInfo;
experience: Experience[];
projects: Projects[];
skills: Skills[];
socials: Social[];
}
export default function Home({pageInfo, experience, projects, skills, socials}: Props) {
return (
<main
className={`bg-[rgb(36, 36, 36)] text-white h-screen overflow-y-scroll overflow-x-hidden snap-y snap-mandatory scroll-smooth ${inter.className}`}
>
<Head>
<title>
Prathamesh Pawar
</title>
</Head>
<div className='sticky top-0 mb-100' style={{zIndex:26}}>
<Header socials={socials}/>
</div>
<section id='hero' className='snap-start' style={{zIndex:1}}>
<Hero pageInfo={pageInfo}/>
</section>
<section id='about' className='snap-center' style={{zIndex:1}}>
<About pageInfo={pageInfo}/>
</section>
<section id='experience' className='snap-center' style={{zIndex:1}}>
<WorkExperience experience={experience} />
</section>
<section id='skills' className='snap-center' style={{zIndex:1}}>
<SkillsComp skills={skills}/>
</section>
<section id='projects' className='snap-center' style={{zIndex:1}}>
<ProjectsComp projects={projects} />
</section>
<section id='contactme' className='snap-end' style={{zIndex:1}}>
<ContactMe pageInfo={pageInfo}/>
</section>
</main>
)
}
export const getStaticProps: GetStaticProps<Props> = async ()=>{
const pageInfo: PageInfo = await fetchPageInfo();
const experience: Experience[] = await fetchExperience();
const projects: Projects[] = await fetchProjects();
const skills: Skills[] = await fetchSkills();
const socials: Social[] = await fetchSocials();
return {
props :{
pageInfo,
experience,
projects,
skills,
socials
},
revalidate:10
}
}型
使用git repository在versel上使用生产构建-再次出现相同的错误
- 问ChatGPT关于它，响应是-->
The error message suggests that there is an issue with the `fetch` function in your `fetchPageInfo` function, specifically when fetching the data for the page. This error is causing the export process to fail.
To troubleshoot this issue, you can try the following steps:
1. Check the URL or API endpoint you are using in the `fetch` function. Make sure it is correct and accessible.
2. Verify that the server hosting the API is running and responding properly.
3. Ensure that any required headers or authentication tokens are correctly included in the fetch request.
4. Check if there are any network restrictions or firewall settings that might be blocking the fetch request.
5. Test the `fetch` function outside of the Next.js export process to see if it works independently.型
1条答案
按热度按时间isr3a4wc1#
答案本身就是错误的
字符串
我必须更新utils中的fetch函数，因为它是通过直接响应获取的，但在index.js中，getStaticProps应该提供必须实现接口pageInfo的json，所以更改是
型