Next.js Fast Refresh服务随机崩溃问题求助

核心问题：CSS背景图片路径错误 #

你当前CSS中引用public文件夹内图片的路径写法不符合Next.js规范，这很可能是导致Fast Refresh时服务器随机崩溃的原因之一。Next.js的public文件夹是静态资源的根目录，引用时无需带上../../public前缀，直接以/开头指向文件名即可。

修正后的GalleryPage.css代码 #

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-item {
  height: 250px;
  width: 150px;
  flex: 0 0 auto;
  margin: 5px;
  background-color: rgb(71, 45, 95);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.red-porsche {
  background-image: url("/red-porsche.jpeg");
}

.bimmers {
  background-image: url("/bimmers.jpeg");
}

额外排查步骤 #

• 清理Next.js缓存：执行rm -rf .next（Mac/Linux）或rd /s /q .next（Windows），随后重启开发服务器
• 校验依赖版本：确保next、react、react-dom版本相互兼容，可通过npm list next react react-dom查看当前版本，建议升级到官方稳定版
• 禁用第三方插件：如果安装了自定义Next.js插件或Babel插件，暂时禁用后测试Fast Refresh是否恢复正常
• 查看崩溃日志：终端中的错误日志会明确指出崩溃原因，可根据日志信息针对性排查

你的组件代码（无需修改） #

import "./GalleryPage.css";

export default function GalleryPage() {
  return (
    <>
      <h1>Gallery</h1>
      <div className="flex-container">
        <div className="flex-item red-porsche"></div>
        <div className="flex-item bimmers"></div>
        <div className="flex-item marlboro"></div>
        <div className="flex-item porsches"></div>
      </div>
    </>
  );
}

你的文件夹结构 #

• public/
  • red-porsche.jpeg
  • bimmers.jpeg
  • marlboro.jpeg
  • porsches.jpeg
• pages/
  • GalleryPage.js
  • GalleryPage.css

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