je recois un objet vide de l'api

Bonjour,

je ne comprends pourquoi

page

export default async function Article({ params: { id } }) {
  const resp = await fetch("http://localhost:3000/api/articles", {
    method: "POST", // on envoi l id a notre api
    body: JSON.stringify({
      id,
    }),
  });

  const article = await resp.json();
  console.log(article);
  return (
    <div
      style={{
        color: "white",
        background: "green",
      }}
    >
      <h1> {article.title}</h1>
    </div>
  );
}

api route

import { NextResponse } from "next/server";

export async function POST(request) {
  const data = await request.json(); // on recoit la requete de /blog/id/page.jsx
  const id = data.id; // on recupere l id
  try {
    const resp = await fetch(
      `https://jl-next-projet-default-rtdb.europe-west1.firebasedatabase.app/articles/${id}.json`
    );

    const data = await resp.json();

    if (!resp.ok) {
      throw new Error("cet article n'existe pas");
    }

    return NextResponse.json(data, { status: 200 });
  } catch (e) {
    throw new Error(e.message);
  }
}

J ai mis un console.log dans mon fichier page et je recois un objet vide dans le terminal

J ai essayé aussi de mettre un consolelog dans mon route mais rien n'apparait dans le terminal.

J ai bien sur verifié mes url qui sont confroment a ce que j'ai dans mon firebase, l id est aussi dans l urldu navigateur je suis bien sur le port 3000 du coup je ne vois pas pourquoi je recois un objet vide...