将 nextjs 应用程序部署到 firebase 失败，但在模拟器中工作正常答案

【问题标题】：Deploy nextjs app to firebase fails but works fine in emulator将 nextjs 应用程序部署到 firebase 失败，但在模拟器中工作正常
【发布时间】：2021-05-16 17:20:36
【问题描述】：

我的 next.js 应用程序在使用具有以下配置的 firebase 模拟器时可以正常工作，但在部署到 firebase 时却无法正常工作。

firebase 函数日志错误

Error: Failed to load /500
    at loadComponents (/workspace/node_modules/next/dist/next-server/server/load-components.js:1:1554)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Server.findPageComponents (/workspace/node_modules/next/dist/next-server/server/next-server.js:76:257)
    at async Server.renderErrorToHTML (/workspace/node_modules/next/dist/next-server/server/next-server.js:138:198)
    at async Server.renderToHTML (/workspace/node_modules/next/dist/next-server/server/next-server.js:137:1629)
    at async Server.render (/workspace/node_modules/next/dist/next-server/server/next-server.js:74:255)
    at async Object.fn (/workspace/node_modules/next/dist/next-server/server/next-server.js:58:672)
    at async Router.execute (/workspace/node_modules/next/dist/next-server/server/router.js:25:67)
    at async Server.run (/workspace/node_modules/next/dist/next-server/server/next-server.js:68:1042)
    at async Server.handleRequest (/workspace/node_modules/next/dist/next-server/server/next-server.js:32:504) 


Error: Failed to load /
    at loadComponents (/workspace/node_modules/next/dist/next-server/server/load-components.js:1:1554)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Server.findPageComponents (/workspace/node_modules/next/dist/next-server/server/next-server.js:76:257)
    at async Server.renderToHTML (/workspace/node_modules/next/dist/next-server/server/next-server.js:137:542)
    at async Server.render (/workspace/node_modules/next/dist/next-server/server/next-server.js:74:255)
    at async Object.fn (/workspace/node_modules/next/dist/next-server/server/next-server.js:58:672)

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "hosting": {
    "public": "public",
    "cleanUrls": true,
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "ssrServer"
      }
    ]
  },
  "emulators": {
    "auth": {
      "port": 9099
    },
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "ui": {
      "enabled": true
    },
    "hosting": {
      "port": 5008,
      "host": "0.0.0.0",
      "public": "public"
    }
  }
}

firebase 函数

import * as functions from 'firebase-functions';
import next from 'next';

const firebaseFunction = functions;

const server = next({
  dev: false,
  dir: __dirname + '/public',
  conf: {
    distDir: '.next',
    experimental: {
      reactRoot: false,
      turboMode: false,
    },
    future: {},
  },
});

const nextjsHandle = server.getRequestHandler();

exports.ssrServer = firebaseFunction.https.onRequest(async (req, res) => {
  return server.prepare().then(() => nextjsHandle(req, res));
});

我错过了什么？

【问题讨论】：

标签： firebase google-cloud-functions next.js

【解决方案1】：

错误表明组件尚未加载。在部署到 Firebase 之前，请确保分别运行每个命令

npm run dev
npm run build

【讨论】：

【解决方案2】：

您正在运行 Next 10.2 吗？可能与this issue有关。

【讨论】：