Next.js部署到Firebase Hosting后样式缺失、脚本返回404如何解决？

1. 修正Firebase托管目录配置 #

你当前firebase.json中hosting.public字段配置为public，但next.config.js里指定了Next.js构建产物输出目录为build，Firebase部署时只会上传你指定的public目录下的文件，自然找不到构建生成的CSS、脚本等资源，触发404报错。
如果采用静态导出方案部署到Firebase Hosting，修改firebase.json如下：

{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "cleanUrls": true
  }
}

同时修改package.json的构建命令，添加静态导出逻辑：

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start",
  "lint": "next lint"
}

后续执行npm run build会生成out目录，存放所有可直接部署的静态资源，再执行firebase deploy即可。

2. 清理next.config.js冗余配置 #

Next.js 12已内置静态资源、样式处理能力，你额外添加的file-loader、自定义entry等配置会和内置逻辑冲突，导致资源路径生成错误。图片自定义loader的配置也不符合静态部署要求，修改后的配置参考：

const path = require('path');

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['assets.coingecko.com'],
    unoptimized: true
  },
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  }
}

删除原有配置中的distDir、entry、module、loader: 'custom'等字段即可。

3. 补全依赖与样式引入 #

使用Sass需要单独安装依赖，你当前的package.json中未添加sass包，执行以下命令安装：

npm install sass --save-dev

同时确认你在项目的pages/_app.js文件中全局引入了Bootstrap样式与全局Sass文件：

import 'bootstrap/dist/css/bootstrap.min.css'
import '../styles/globals.scss'

路径根据你实际的全局样式存放位置调整即可。

4. 本地图片引用规则调整 #

如果使用本地静态图片，统一将图片存放在项目根目录的public文件夹下，引用时直接写根路径即可，例如图片存放在public/logo.png，引用路径为/logo.png。

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