Förklaring

Felet uppstår när koden antar att ett API-svar är JSON, men servern returnerade en HTML-sida, vanligtvis en 404- eller 500-felsida. response.json() försöker parsa HTML-strängen som JSON och misslyckas eftersom HTML börjar med <.

I Next.js är det vanligast vid anrop till egna API-routes eller externa API:er i en server-komponent. En felaktig URL, en route som inte finns, eller ett serverfel returnerar Next.js egna felsidor i stället för det förväntade JSON-svaret.

Felet syns även i webbläsarens konsol när klientkod fetchär ett API och inte kontrollerar svarsstatusen.

Vanliga orsaker

Felaktig URL som pekar på en sida som inte finns. API-route som kraschar och returnerar Next.js felsida. HTTP-fel (401, 403, 500) som inte kontrolleras innan response.json() anropas.

Lösning

Kontrollera att svaret är OK innan du parsar JSON:

const res = await fetch('/api/data');

if (!res.ok) {
  throw new Error(`API svarade med ${res.status}: ${res.statusText}`);
}

const data = await res.json();

Vid felsökning kan du läsa svaret som text för att se vad servern faktiskt returnerar:

const text = await res.text();
console.log(text);