将nextjs应用程序部署到firebase失败，但在模拟器中运行良好

Question

My 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"
}
}
}

火球功能

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));
});

我错过了什么？

Answer 1

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

npm run dev
npm run build

Answer 2

您正在运行Next 10.2吗？它可能与这个问题有关。