我在导入下一个/图像和下一个/链接时遇到问题

Question

我的下一个/导入都不起作用。我目前正在使用 Next.js v14.2.4 和 Node v18.17.0。在我的“/app/page.tsx”上，我有这两个导入：

import Image from 'next/image';
import Link from 'next/link';

在导出默认函数Page()的返回语句中，这两个调用如下：

<Link
            href="/login"
            className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
          >
            <span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
          </Link>

和

<Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots of the dashboard project showing desktop version"
      />

导入突出显示为红色，并且错误提示

Cannot find module 'next/image'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

“下一个/链接”也是如此

我正在学习“学习”部分的官方 Next.js 指南。我直接从网站上获取代码 我尝试过卸载 Next.js、Node、重新启动 VS 代码等。我尝试过使用 next/legacy/image，但它也不起作用

我直接尝试了“npm i next/image”，它说权限被拒绝

我确保图像位于 /public 文件夹下 // 树结构是正确的 有谁知道我无法导入这些模块的问题是什么？我检查了node_modules，但在 Next 文件夹下也没有看到它们。

如果我能得到一些见解/方法来解决这个问题，我将不胜感激。

谢谢你

Answer 1

next/image

是一个 JS 文件，随

next

包一起提供。如果您能找到

node_modules/next/image.js

，那么这不是问题。

其次，仔细检查 NextJS 项目根目录中的

tsconfig.json

文件。确保

"moduleResolution"

设置为

"bundler"

，如下所示：

{
  "compilerOptions": {
    // ...other options
    "moduleResolution": "bundler",
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

尝试再次使用

npm run dev

运行应用程序，看看是否可以解决问题。