Reputation: 41
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,
S,
},
};
}
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?
Upvotes: 4
Views: 11929
Reputation: 19
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.
Upvotes: 2
Reputation: 2563
getStaticProps
method;Solution:
P.S. still don't know a better way of doing this...
Upvotes: 0
Reputation: 11541
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.
Upvotes: 5