Js应用程序使用健全性，
我试了很多方法，但都不管用，
每个组件都被导出，导入也是正确的.
在执行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:
/
- 以下是我的环境
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存储库在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.