Nextjs API RoutesをFirebaseでデプロイしたがうまくいかなかった

はじめに

Nextjsで作ったアプリにメール問い合わせの機能を追加したところつまづきネットにわかりやすくまとまった情報がなかったので自分なりにまとめます

問題

Nextjs13で以下のようなAPIを作成しました

app/api/contact/routes.ts

import { NextRequest, NextResponse } from "next/server";
import nodemailer from "nodemailer";

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "*",
};

export async function OPTIONS() {
  return NextResponse.json({}, { headers: corsHeaders });
}

export async function POST(req: NextRequest) {
  const body = await req.json();

  const transporter = nodemailer.createTransport({
    host: "smtp.gmail.com",
    port: 587,
    auth: {
      user: process.env.GMAILUSER,
      pass: process.env.GMAILPASSWORD,
    },
  });

  const toHostMailData = {
    from: body.email,
    to: "[e-mail]",
    subject: `【お問い合わせ】${body.name}様からのお問い合わせ`,
    text: `${body.message}`,
    html: `
      <p>お問い合わせ内容</p>
      <p>お名前：${body.name}</p>
      <p>メールアドレス：${body.email}</p>
      <p>お問い合わせ内容：${body.content}</p>
      `,
  };

  await transporter.sendMail(toHostMailData);
  return NextResponse.json(
    { message: "success" },
    { status: 200, headers: corsHeaders }
  );
}

これをローカルから叩くとうまくいくことが確認できるのですが、なぜかfirebase deployをしたものに対して叩くとうまくいきません

$ curl -x POST 'http://localhost:3000/api/contact -d .... -> OK
$ curl -x POST 'httsp://deploy-origin/api/contact -d .... -> NG

ローカルと挙動が異なっているので謎に感じました

解決方法？

APIを利用するには、それ用の設定をするとできるようです

cloud Funtionsのエントリーポイントとなるファンクションで、リクエストをNext.jsアプリに渡すようにしています

うまいことルーティングするとできるらしいのですが、私には再現できず、、、

またcloud functionsにデプロイされているSSRサーバーに対してもアクセスを試みましたがうまくいきませんでした、、、

わかる方は教えてほしいです

解決方法

ということで、APIは別に作成することに来ました
cloud functions for firebaseを利用して別プロジェクトとして作成した関数をデプロイして解決しました

これは以下の記事でハンズオンとして紹介しています

おわりに

Nextjs慣れてきたかなと思いますが、地味に躓くことが多くてReactよりも考えることが多いなぁといった印象です。。

参考