NextJS-Beta-Anwendungsrouter: Anfrage mit Fetch schlägt fehl, funktioniert aber im Browser einwandfrei

Question

Ich verwende nextJS mit dem APP-Verzeichnis und dieses Problem tritt auf, wenn ich eine GET-Anfrage mache...

Ich habe die folgende Funktion, um Projekte aus meinem /project Route.ts abzurufen.

Sieht so aus, als würde es die GET-Funktion in meiner Routes.ts nicht auslösen

console.log("in GET /projects") wird nie ausgelöst und ich erhalte am Ende einen unerwarteten JSON-Fehler.

Wenn ich jedoch im Browser auf „http://localhost:3000/api/project“ zugreife, wird die GET-Funktion in meiner Routes.ts aufgerufen und ich erhalte JSON zurück...

Vielen Dank für Ihre Hilfe, ich arbeite schon eine Weile an diesem Problem...

export const projectsGet = async () => {
  const res = await fetch("http://localhost:3000/api/project", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  });

  console.log(res, 'before')     //triggers
  const data = await res.json()  // error: Unexpected end of JSON input
  console.log(data, 'after')     // does not trigger
  
  return data
};

Dies ist meine Projektroute, die sich in /api/project/route.ts befindet. Ich habe eine POST-Route in derselben Datei, die ein Projekt erstellt und einwandfrei funktioniert ...

export const GET = async () => {
  console.log("in GET /projects");  //never triggers unless i visit the URL in browser

  const user = await getUserFromCookie(cookies());

  const projects = await db.project.findMany({
    where: {
      ownerId: user?.id,
    },
    include: {
      tasks: true,
    },
  });

  const filteredProjects = projects.filter((project) => {
    return project.deleted === false;
  });

  return NextResponse.json(filteredProjects);
};

Answer 1

我认为你应该在`/api/project/route.ts中以这种形式返回json。

export async function GET(){
  console.log("in GET /projects");

  const user = await getUserFromCookie(cookies());

  const projects = await db.project.findMany({
    where: {
      ownerId: user?.id,
    },
    include: {
      tasks: true,
    },
  });

  const filteredProjects = projects.filter((project) => {
    return project.deleted === false;
  });

  return new Response(JSON.stringify(filteredProjects));
};