Next.jsをVercelにデプロイする際にAWSのAPIが419でうまくいかなかった話

localで動くのにデプロイすると動かなくなるのにかなり苦労しました。

結論

page.tsxに直接axiosを書いていたのですが、apiフォルダを作成してそこから呼び出せば動きました。

api/login/route.ts

import axios from "axios";
import { NextRequest } from "next/server";

export async function POST(req: NextRequest) {
  const { email, password } = await req.json();

  if (!email || !password) {
    const errorMessages = [];
    if (!email) {
      errorMessages.push("メールアドレスを入力してください");
    }
    if (!password) {
      errorMessages.push("パスワードを入力してください");
    }

    return new Response(errorMessages.join(", "), { status: 400 });
  }

  const data = {
    user: { email, password },
  };

  try {
    const response = await axios.post(
      `${process.env.NEXT_PUBLIC_API_URL}/api/login`,
      data.user
    );

    if (response.status === 200) {
      return new Response("ログインしました", { status: 200 });
    }
  } catch (error) {
    if (axios.isAxiosError(error)) {
      if (error.response) {
        if (error.response.data.errors) {
          const errors = error.response.data.errors;
          const errorsString = JSON.stringify(errors);
          return new Response(errorsString, { status: 500 });
        }
        return new Response(error.response.data.message, { status: 500 });
      }
    }
  }
}

page.tsx側ではfetchを使用

const url = `${process.env.NEXT_PUBLIC_ROUTE_API_URL}/api/login`;

const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ email, password }),
    });