我在部署下一个Js应用程序的错误是什么?

Question

当我在Vercel中部署项目时出现错误。

我的错误

https://nextjs.org/telemetry
info  - Checking validity of types...
info  - Creating an optimized production build...
Failed to compile.
./components/Footer.js
Module not found: Can't resolve 'next/Image' in '/vercel/path0/components'
Import trace for requested module:
./components/Layout.js
./pages/_app.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.
Error: Command "yarn run build" exited with 1

但是在页脚我写了import Image from "next/Image";

我的页脚

import React from "react";
import Link from "next/link";
import Image from "next/Image";
import Logo from "../public/images/Logo.svg";
import { useRouter } from "next/router";
import EnvelopeIcon from "../public/images/envelope.svg";
import PhoneIcon from "../public/images/phone.svg";
import MapChecker from "../public/images/map-marker-check.svg";
const Footer = () => {
const router = useRouter();
return (
<footer>
<div className="footer-context container">
<div className="footer-navbar">
<div className="logo">
<Link href={"/"}>
<Image src={Logo} alt="GlobalSoft logo" />
</Link>
</div>
</div>
<div className="line"></div>
<div className="footer-info">
<div className="card envelope">
<a href="mailto:[e-mail]">
<div className="card-image">
<Image src={EnvelopeIcon} alt="Envelope Icon" />{" "}
</div>
</a>
</div>
<div className="card phone">
<a href="tel:[phone] ">
<div className="card-image">
<Image src={PhoneIcon} alt="Phone Icon" />{" "}
</div>

</a>
</div>
<div className="card address">
<a target="_blank" rel="noopener noreferrer" href="https://goo.gl/maps/FzvbQnQEtpZCPKLm8">
<div className="card-image">
<Image src={MapChecker} alt="Map Check Icon" />{" "}
</div>
</a>
</div>
</div>
</div>
</footer>
);
};
export default Footer;

Answer 1

Image组件要求宽度和重量必须指定。