在 firebase 中使用 API 路由托管 Next js 项目

Question

在 firebase 中使用 API 路由托管 Next js 项目。 这里的项目是使用 Next JS-typescript 开发的。 项目结构：

项目名称 firebase.json 页数 应用程序接口 登录.ts 索引.tsx

托管方式如下：

• npm 运行构建
• firebase 初始化
• firebase 部署
• npm 运行构建 && npm 运行导出
• firebase 部署

为导出创建的 out 文件夹包含 index.html 页面以及其他基本文件和文件夹。

使用 asios 方法调用登录 api.

我尝试从 index.tsx 文件调用登录 api。

登录.ts：

export default async function LoginAPI(req: NextApiRequest, res: NextApiResponse) {
 var response = await createUserWithEmailAndPassword(auth, req.body.email, req.body..password);
return res.status(200).json({message:response});
}

index.tsx

export default function Home() {
  const handleSubmit = async () => {
          const response= await axios.post('/api/login',{email:"[email protected]",password:"xxxxxxxxx"})
alert(response.user.uid);
  }

return (
         <>
           <button onClick={()=>handleSubmit()}  >Login</>
         </>
        )
}

firebase.json

{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

托管项目后，当我尝试单击登录按钮并接收 uid 时，它总是在 npm 运行导出期间创建的 out 文件夹中发送 index 的 html 文件

在本地运行，它工作正常。但在托管环境中，它没有。

解决问题参考文章：

1. https://github.com/FirebaseExtended/firebase-framework-tools#integrate-nextjs
2. https://nextjs.org/docs/advanced-features/static-html-export#unsupported-features

从上面的参考资料可以看出，在构建过程中，API 路由不是受支持的功能。如果我们可以做更多，我们只能使用 firebase 实验性功能。

我需要一种在 firebase 中使用 API 路由托管 Next JS 项目的方法。