Next.jsでCSVをAPIに送るのに苦戦した

はじめに

Next.jsからファイルをAPIにポストしようとしたのですが、調べてもすぐに解決できなかったのでまとめていきます。

問題

以下のようにインプットにいれたファイルを登録できるようにしました

  const [file, setFile] = useState<File>()

  const handleSubmit = async () => {

    const res = await fetch(
      `/api/v1/resources/mappings`,
      {
        method: "POST",
        body: { fle: file }
      },
    );
    const { body } = await res.json();
    setResponse({ status: res.status, body });
  };

そしてNext.jsのAPIでさらに外部APIを叩くようにしています

export async function POST(request: NextRequest) {
  const json = await request.json();
  const formData = new FormData();
  formData.append("file", JSON.stringify(json.file));
  const response: createMappingResponse = await fetch(
    `${process.env.EP_ORIGIN}/api/internal/v1/mappings`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: formData,
    },
  ).then((res) => res.json());
  const status = response.result.failed.length === 0 ? 201 : 400;

  return NextResponse.json({ body: response.result, status });
}

しかしこれではうまくファイルを送ることができあせんでした

解決方法

ファイルの送り方をformdataに包んで送るようにしました
また、handleSubmitの段階で送る時にformdataを使っていなかったので使うようにしました

  const handleSubmit = async () => {
    const formData = new FormData();
    formData.append("file", file!);

    const res = await fetch(
      `/api/v1/resources/mappings`,
      {
        method: "POST",
        body: formData,
      },
    );
    const { body } = await res.json();
    setResponse({ status: res.status, body });
  };

export async function POST(request: NextRequest) {
  const formData = await request.formData();
  const response = await fetch(
    `${process.env.EP_ORIGIN}/api/internal/v1/mappings`,
    {
      method: "POST",
      body: formData,
    },
  ).then((res) => res.json());

  return NextResponse.json({ body: response.result, status: response.status });
}

おわりに

なぜか結構難しいなと感じたのはNext.jsのAPIと外部APIの2回で渡していたのが原因かなと思いました
うまくいったよかったです