NextJS应用在Vercel/Cloudflare部署时的SSR及构建故障求助

背景 #

最初使用ReactJS开发应用，遇到社交平台分享无法预览的问题，尝试React-Helmet等方案未解决。为解决该问题并优化SEO，迁移到NextJS实现SSR，本地通过ngrok部署可正常预览，但生产环境部署到Vercel和Cloudflare时出现如下故障：

Vercel部署故障 #

• 应用部署成功，但使用getServerSideProps的页面访问时出现**GATEWAY_TIMEOUT（504）**错误

Cloudflare部署故障 #

方法1：常规构建部署 #

使用yarn build构建部署后，SSR页面返回404 Not Found

方法2：使用next-on-pages构建 #

执行命令npx @cloudflare/next-on-pages --experimental-minify构建失败，报错如图

相关配置与版本信息 #

方法2使用的next.config.js配置 #

module.exports = {
  experimental: {
    runtime: 'experimental-edge'
  },
  reactStrictMode: true,
  swcMinify: true
}

部署使用的包版本 #

"node": "^17.0.0",
"next": "^13.1.6",
"react": "^18.2.0"
"yarn": "^1.22.17",
"react-dom": "^18.2.0",

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