Firebase Hosting中NextJs作为React子目录/blogs部署后配置不生效问题

问题背景 #

React主应用已部署在Firebase Hosting并绑定域名，为满足SEO需求，计划将Next.js应用部署至主应用的/blogs子目录。此前尝试重写规则未成功，后续通过配置实现了部分功能，但线上环境中next.config.js的basePath、图片域名等配置完全不生效，本地环境则正常，询问是否需要修改server.js解决此问题。

现有配置 #

目录结构 #

.
+-- _projectFolder
|   +-- firebase.json
|   +-- .firebaserc
|   +-- Reactjs Files...
+-- nextApp
|   +-- server.js
|   +-- Nextjs files...

firebase.json配置 #

{
  "hosting": [
    {
      "target": "blog",
      "public": "./nextApp/public",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "function": "nextServer"
        }
      ]
    },
    {
      "target": "main",
      "public": "build",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "/blogs/**",
          "function": "nextServer"
        },
        {
          "source": "/blogs",
          "function": "nextServer"
        }
      ]
    }
  ],
  "functions": {
    "source": "./nextApp",
    "runtime": "nodejs16"
  }
}

server.js原代码 #

const { https } = require("firebase-functions")
const { default: next } = require("next")

const isDev = process.env.NODE_ENV !== "production"

const nextjsDistDir = require("./next.config.js").distDir

const server = next({
  dev: false,
  //location of .next generated after running -> yarn build
  conf: { distDir: nextjsDistDir },
})

const nextjsHandle = server.getRequestHandler()
exports.nextServer = https.onRequest((req, res) => {
  return server.prepare().then(() => {
    return nextjsHandle(req, res)
  })
})

/*
firebase-admin,firebase-functions
require these plugins, install them
*/

next.config.js关键配置 #

module.exports = {
  basePath: "/blogs",
  // 其他配置（如图片域名等）
}

解决方案：修改server.js传递完整Next.js配置 #

是的，必须修改server.js，因为Firebase Cloud Functions运行Next.js时，不会自动加载next.config.js的完整配置，需要手动将所有配置传递给Next.js服务器实例。

修改后的server.js代码：

const { https } = require("firebase-functions")
const { default: next } = require("next")

// 导入完整的Next.js配置
const nextConfig = require("./next.config.js")

const server = next({
  dev: false,
  // 传入完整配置，而非仅distDir
  conf: nextConfig,
})

const nextjsHandle = server.getRequestHandler()
exports.nextServer = https.onRequest((req, res) => {
  return server.prepare().then(() => {
    return nextjsHandle(req, res)
  })
})

原理说明 #

本地开发时，Next.js会自动读取next.config.js中的所有配置并生效；但通过Firebase Functions部署时，Next.js以自定义服务器模式运行，仅会使用你显式传入next()实例的配置。之前只传入了distDir，导致basePath等其他配置被忽略，线上环境无法生效。

额外检查项 #

1. 确保Next.js应用已执行yarn build（或npm run build），生成.next目录后再部署Firebase Functions
2. 若无需单独的blog Hosting目标，可删除该配置项，避免冗余

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