Next.js next dev命令不实时同步代码更改问题求助

修改Navbar组件内容（比如调整<Image>标签属性）后，开发服务器无法实时同步更改，Chrome开发者工具的Elements面板也看不到更新，只有重启npm run dev后修改才会生效，已搜索约一小时未找到解决方案。

Navbar组件代码 #

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，仅第一次修改生效，后续仍需重启服务器；且修改package.json本身就需要重新运行npm run dev，因此改端口无实际作用。

补充输出信息 #

VS Code终端运行npm run dev的输出 #

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)

Chrome控制台输出 #

• 启动开发服务器后：

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

• 清空控制台后修改代码并保存：

[Fast Refresh] rebuilding

恳请各位提供解决方案。

内容的提问来源于stack exchange，提问作者RedFish