NextJS 在生产环境中调用动态页面重定向到 root
NextJS calling dynamic page on production redirects to root
我想要的
用户输入https://www.example.com/test,用户获取NextJS动态路由内容/test/index.js
。
这在本地有效。
会发生什么
用户输入https://www.example.com/test,用户获取根页面内容(index.js)。
浏览器仍然显示 https://www.example.com/test 但它不是 /test/index.js
的内容。 这只出现在生产中。
信息
- 正在部署到 Firebase 托管。
问题的根源在于,我正在导出 NextJS 应用程序并将输出用作 Firebase 的源文件。针对我的具体问题的解决方案是,设置 Firebase 函数 以真正启用服务器端渲染,而不是显示提供的静态文件。这也解决了我的路由问题。
我发现教程非常具有误导性,因为每个人都使用不同的文件夹结构和方式来部署应用程序。
如果您遇到同样的问题,请随时查看 my repository。它是 Firebase 配置、package.json 和服务器文件协同工作的组合 - 考虑到为开发和生产导出的不同文件夹路径。
这些资源对我有帮助:
总体教程:https://itnext.io/deploying-next-js-app-to-firebase-functions-eb473791d79e - 缺少一些关于函数名称的步骤。
非常适合理解每个文件的作用:https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs
有助于理解渲染方式:https://codeburst.io/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2
这让我明白了如何正确使用 Firebase 函数名称:https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting
我想要的
用户输入https://www.example.com/test,用户获取NextJS动态路由内容/test/index.js
。
这在本地有效。
会发生什么
用户输入https://www.example.com/test,用户获取根页面内容(index.js)。
浏览器仍然显示 https://www.example.com/test 但它不是 /test/index.js
的内容。 这只出现在生产中。
信息
- 正在部署到 Firebase 托管。
问题的根源在于,我正在导出 NextJS 应用程序并将输出用作 Firebase 的源文件。针对我的具体问题的解决方案是,设置 Firebase 函数 以真正启用服务器端渲染,而不是显示提供的静态文件。这也解决了我的路由问题。
我发现教程非常具有误导性,因为每个人都使用不同的文件夹结构和方式来部署应用程序。
如果您遇到同样的问题,请随时查看 my repository。它是 Firebase 配置、package.json 和服务器文件协同工作的组合 - 考虑到为开发和生产导出的不同文件夹路径。
这些资源对我有帮助:
总体教程:https://itnext.io/deploying-next-js-app-to-firebase-functions-eb473791d79e - 缺少一些关于函数名称的步骤。
非常适合理解每个文件的作用:https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs
有助于理解渲染方式:https://codeburst.io/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2
这让我明白了如何正确使用 Firebase 函数名称:https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting