我试图构建应用程序来部署它，我得到这个错误现在已经一天了，因为我面临这个问题，我真的卡住了，没有想法，应用程序在本地工作很好，在开发模式中没有错误，当我执行yarn build时出现错误
控制台上的错误是:
C:UsersMA13Desktop5 days PlanPortofolioportfolio-frontend>yarn build
yarn run v1.22.19
warning ........package.json: No license field
$ next build
info - Linting and checking validity of types
info - Creating an optimized production build
Failed to compile.
./public/assets/contact.jpg
TypeError: fetch failed
at Object.processResponse (node:internal/deps/undici/undici:5555:34)
at node:internal/deps/undici/undici:5877:42
at node:internal/process/task_queues:140:7
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
Import trace for requested module:
./components/Contact.jsx
./pages/index.js
./public/assets/projects/property.jpg
TypeError: fetch failed
at Object.processResponse (node:internal/deps/undici/undici:5555:34)
at node:internal/deps/undici/undici:5877:42
at node:internal/process/task_queues:140:7
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Import trace for requested module:
./components/Projects.jsx
./pages/index.js
> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
错误中提到的组件
指数:
import Head from 'next/head'
import Image from 'next/image'
import Navbar from '../components/Navbar'
import HomeSection from '../components/HomeSection'
import About from '../components/About'
import Skills from '../components/Skills'
import Projects from '../components/Projects'
import Contact from '../components/Contact'
export default function Home() {
return (
<div >
<Head>
<title>Mahmoud | Full Stack</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/assets/logo.png" />
</Head>
<Navbar></Navbar>
<HomeSection/>
<About />
<Skills />
<Projects />
<Contact />
</div>
)
}
项目组件:
import Image from 'next/image'
import Link from 'next/Link'
import PropertyImg from '../public/assets/projects/property.jpg'
const Projects = () => {
return (
<div id='projects' className='w-full'>
<div className='max-w-[1240px] mx-auto px-2 py-24 '>
<h3 className='text-xl tracking-widest uppercase text-[#5651e5]'>Projects</h3>
<h1>What I have Built</h1>
<div className='grid md:grid-cols-2 gap-8 my-4'>
<div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
<Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
<div className='hidden group-hover:block absolute '>
<div className="flex justify-center items-center">
<div>
<h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
<p className='pb-4 pt-2 text-center text-white'>React Project</p>
<Link className='group' href='/'>
<p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
</Link>
</div>
</div>
</div>
</div>
<div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
<Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
<div className='hidden group-hover:block absolute '>
<div className="flex justify-center items-center">
<div>
<h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
<p className='pb-4 pt-2 text-center text-white'>React Project</p>
<Link className='group' href='/'>
<p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
</Link>
</div>
</div>
</div>
</div>
<div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
<Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
<div className='hidden group-hover:block absolute '>
<div className="flex justify-center items-center">
<div>
<h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
<p className='pb-4 pt-2 text-center text-white'>React Project</p>
<Link className='group' href='/'>
<p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
</Link>
</div>
</div>
</div>
</div>
<div className='relative flex items-center justify-center w-full h-auto shadow-xl shadow-gray-400 rounded-xl p-4 group hover:bg-gradient-to-r from-[#565eef] to-[#709dff]'>
<Image className='rounded-xl group-hover:opacity-10' src={PropertyImg} alt='/'/>
<div className='hidden group-hover:block absolute '>
<div className="flex justify-center items-center">
<div>
<h3 className='text-2xl text-white tracking-wider text-center'>Property finder</h3>
<p className='pb-4 pt-2 text-center text-white'>React Project</p>
<Link className='group' href='/'>
<p className='text-center py-3 rounded-lg text-gray-700 bg-white font-bold text-lg cursor-pointer hover:bg-gray-50'>More Info</p>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Projects
contact组件:
import Image from 'next/image'
import Link from 'next/Link';
import ContactImage from '../public/assets/contact.jpg'
import { AiOutlineMail } from 'react-icons/ai'
import { FaFacebook, FaGithub, FaLinkedinIn } from 'react-icons/fa'
import { BsFillPersonLinesFill } from 'react-icons/bs'
import { HiOutlineChevronDoubleUp } from 'react-icons/hi'
const Contact = () => {
return (
<div>
<div id='contact' className='w-full max-w-[1240px] mx-auto px-2 md:h-screen py-24 my-4'>
<h3 className='text-xl tracking-widest uppercase text-[#5651e5]'>Contact</h3>
<h1 className='mt-2 mb-6'>Get In Touch</h1>
<div className='md:grid md:grid-cols-6 gap-4 h-5/6 w-full flex flex-col my-4 justify-center '>
<div className=' col-span-2 py-4 px-4 shadow-xl rounded-xl shadow-gray-400 flex flex-col justify-between h-full'>
<div className='mt-2'>
<Image className='hover:scale-105 ease-in duration-300 rounded-xl' src={ContactImage} alt='/' />
<h3>Mahmoud Ashraf</h3>
<p className='my-3'>Full Stack Web Developer</p>
<p>I am available for freelancer or full-time positions. contact me and lets talk.</p>
</div>
<div>
<p className='text-center'>contact me on</p>
<div className="flex justify-center items-center py-4 space-x-4">
<div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
<FaLinkedinIn />
</div>
<div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
<FaGithub />
</div>
<div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
<AiOutlineMail />
</div>
<div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
<FaFacebook />
</div>
<div className='rounded-full shadow-lg shadow-gray-400 p-3 cursor-pointer hover:scale-110 duration-500'>
<BsFillPersonLinesFill />
</div>
</div>
</div>
</div>
<div className='col-span-4 py-4 pt-10 md:px-12 shadow-xl rounded-xl shadow-gray-400 flex justify-between flex-col'>
<div className='flex-col space-y-3'>
<div className='md:flex justify-between md:space-x-3'>
<div className='flex flex-col w-full '>
<label className='mb-1' htmlFor="name">Name</label>
<input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='name' />
</div>
<div className='flex flex-col w-full '>
<label className='mb-1' htmlFor="name">Phone</label>
<input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='phone' />
</div>
</div>
<div className='flex flex-col w-full '>
<label className='mb-1' htmlFor="email">Email</label>
<input type="email" className='h-10 rounded-lg border-2 border-gray-200' id='email' />
</div>
<div className='flex flex-col w-full '>
<label className='mb-1' htmlFor="subject">Subject</label>
<input type="text" className='h-10 rounded-lg border-2 border-gray-200' id='subject' />
</div>
<div className='flex flex-col w-full '>
<label className='mb-1' htmlFor="message">Message</label>
<textarea type="text" className='h-36 rounded-lg border-2 border-gray-200' id='message' />
</div>
</div>
<div className='flex flex-col justify-center items-center w-full my-6 px-4'>
<button className='h-10 w-full md:w-3/4 hover:brightness-105'>Submit</button>
</div>
</div>
</div>
</div>
<div className='flex flex-col justify-center items-center my-10 cursor-pointer hover:scale-105 ease-in duration-300'>
<Link href='/' alt='/'>
<HiOutlineChevronDoubleUp className='w-10 h-10 rounded-full shadow-lg my-4 shadow-gray-400 text-[#5651e5] p-2' />
</Link>
</div>
</div>
)
}
export default Contact
则文件夹结构如下:输入图片描述
经过长时间的研究，我终于解决并理解了它，
有两种方法可以通过next/image 在您的下一个应用程序中包含PIC- 第一个是导入图像，然后将其添加到next/image组件的source属性。 第二种方法，如果你从API或任何外部URL获取这些图像在这种情况下，你必须配置图像加载器，你可以在这里阅读这个输入链接描述在这里。