Zenn
⤵️

[Next.js + Fastapi]Next.jsからfetchでデータをfastapiに送る方法

2024/02/25に公開
Next.js
Python
TypeScript
FastAPI
tech

このコードにたどり着くまで2日かかってしまったので…

注意

Next.js App Routerの方を使っています。
Pages Routerではないので注意してください。

コード例

Nextjs側

page.tsx
  async function sendMessage(formData: FormData) {
    "use server";
    const json = JSON.stringify(Object.fromEntries(formData));
    await fetch("http://127.0.0.1:8000/receive-json-response/", {
      method: "POST",
      body: json,
      headers: {
        "Content-Type": "application/json",
      },
    }).then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("Something went wrong");
      }
    });
  }

sendMessageは<form action={sendMessage}>内の<button type="submit"></button>を押すことで開始される処理とします。

Fastapi側

main.py
from fastapi import FastAPI, Request
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/receive-json-response")
async def receive_form_data(request:Request) -> dict:
    data = await request.json()
    print(data.get("message"))
    return {"Received Data": "OK"}

解説

上記のコードでは、Next.jsからFastAPIへのデータの送信が行われています。Next.js側では、fetchを使用してhttp://127.0.0.1:8000/receive-json-response/に対してPOSTリクエストを行っています。送信するデータはJSON形式で、ヘッダーにContent-Type: application/jsonを設定しています。

一方、FastAPI側では、/receive-json-responseエンドポイントを設定してPOSTリクエストを受け付け、送られてきたJSONデータを読み取っています。このコードを使用することで、Next.jsからFastAPIへのデータ送信が可能になります。

情報がなさすぎる…

Nextjs自体は結構な歴史があるけどApp Router自体は1年くらい前の技術だから情報がない、
Fastapiも歴史が浅いので情報がない、
といった具合で情報が少ないとめっちゃ苦戦してしまいますね…

Discussion