next.js SyntaxError: Unexpected token < in JSON at position 0

Question

API is working, I can use this API on other pages. but this page can't, I don't know where's wrong?? code:

export async function getStaticPaths() { const response = await fetch("http://localhost:8080/students"); const data = await response.json(); const paths = data.map((d) => { return { params: { id: d._id.toString(), }, }; }); return { paths, fallback: false, }; } export async function getStaticProps({ params }) { const response = await fetch(`http://localhost:8080/students/${params.id}`); const data = await response.json(); return { props: { data, Ｓ, }, }; } export default function StudentProfile({ data }) { return ( <div> <h1>{data.name}</h1> <h1>{data.age}</h1> <h1>{data.id}</h1> </div> ); }

error message:

Server Error SyntaxError: Unexpected token < in JSON at position 0 This error happened while generating the page. Any console logs will be displayed in the terminal window. pages/profile/[id].js (26:15) @ async getStaticProps 24 | export async function getStaticProps({ params }) { 25 | const response = await fetch(http://localhost:8080/students/${params.id}); 26 | const data = await response.json(); | ^ 27 | return { 28 | props: { 29 | data,

I sure about the API is successfully connected. This code can run successfully and display data:

export async function getStaticProps() { const respone = await fetch("http://localhost:8080/students"); const data = await respone.json(); return { props: { data, }, }; } export default function StaticGenerationPage({ data }) { return ( <div> {data.map((d) => { return <h1>{d.name + " " + d._id}</h1>; })} </div> ); }

Are there any other potential causes of error?

can you console.log(params.id) in getStaticProps, copy what it logs and add the result to your question — Stanleyy
– Stanleyy, Commented Jan 6, 2023 at 12:40
Is it http://localhost:8080/students/ or http://localhost:8080/api/students/? — Joan Lara
– Joan Lara, Commented Jan 6, 2023 at 12:45
Check your API once again, I suspect you have a typo in the URL and you are getting a 404 HTML error page (which is obviously not valid JSON as it starts with the < character). — Guillaume Brunerie
– Guillaume Brunerie, Commented Jan 6, 2023 at 13:00

jujule · Accepted Answer · 2023-01-06 12:56:13Z

Unexpected token < in JSON at position 0 means the JSON returned by the API is not valid

Also, getStaticProps does not have access to the incoming request (such as query parameters or HTTP headers) see getStaticProps docs.

juliomalves · Accepted Answer · 2023-07-02 15:37:42Z

This error occurs due to the fact that when deploying to Vercel link, or server base URL at which you are requesting, it's providing an HTML response, and that's why after calling fetch you cannot do res.json().

To resolve this you can check res.headers['content-type'] is text/html, then you just return null. And you're good to go.

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Dima Dorogonov · Accepted Answer · 2023-06-21 21:41:27Z

I'm trying to fetch JSON from the getStaticProps method;
I've tried to execute a build that refers to the production endpoint.
As the file (new language JSON) was not in prod yet, the issue happened.

Solution:

Comment temporary fetching or prerendering for this new locale (language JSON);
Push code to prod;
Uncomment and push a version with a new locale that will be able to prerender new JSON now;

P.S. still don't know a better way of doing this...

Collectives™ on Stack Overflow

next.js SyntaxError: Unexpected token < in JSON at position 0

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related