Next.js - 下一个开发不反映代码中的更改

Question

我正在浏览一些教程，经过大约一个小时的搜索，我似乎找不到解决方案。我对特定组件（导航栏）所做的任何更改都不会反映在开发服务器中。

我只是想更改和使用Image标签，但在 VScode 中保存后，没有反映任何更改，即使在 Google 开发工具的“元素”选项卡中也是如此。

这些更改仅在我重新启动开发服务器后才会反映出来。

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

const Navbar = () => {
  return (
    <nav>
      <div className="logo">
        <Image src="/logo.png" alt="nothing" width={122} height={78}/>
      </div>
    </nav>
);
}
 
export default Navbar;

这是我的版本和依赖项：

"packages": {
    "": {
      "name": "ninjalist",
      "version": "0.1.0",
      "dependencies": {
        "@next/font": "13.1.6",
        "next": "13.1.6",
        "react": "18.2.0",
        "react-dom": "18.2.0"
      }
    }

有人有解决办法吗？

我的开发服务器运行在端口3000上，但之前我在其他组件中遇到了同样的问题，所以我将其更改为端口8000，按照另一个线程的解决方案。

"scripts": {
    "dev": "next dev -p 8000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

更改端口号后，它适用于1次更改，然后我必须再次重新启动服务器。如果我错了，请纠正我，但我不认为更改端口号有任何作用，因为在编辑 package.json 文件后我必须再次运行 npm run dev 。

编辑：保存代码后共享我的终端和控制台输出

我运行 npm run build 的 VScode 终端：

    ready - started server on 0.0.0.0:8000, url: http://localhost:8000
event - compiled client and server successfully in 619 ms (236 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 196 ms (242 modules)
wait  - compiling...
event - compiled client and server successfully in 208 ms (244 modules)

启动 npm run dev 后 Chrome 控制台输出：

[Fast Refresh] rebuilding
hot-dev-client.js?1600:130 [Fast Refresh] done in 274ms

清除控制台并编辑代码，然后保存：

[Fast Refresh] rebuilding

Answer 1

导入的组件名称区分大小写。例如，当导入的组件大小写不匹配时，它不会在更改时重新渲染，就会出现此问题

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

可能是I或Image属于L组件Link文件名大写，并且您正在使用小图像/链接，它将首次渲染组件而不会出现错误，但在发生更改时不会重新渲染。