CODEWITHSUNDEEP
javascriptreactjsjsonnext.js
rightwhale
rightwhale

Reputation: 41

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

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?

Upvotes: 4

Views: 11929

Answers (3)

Bharat
Bharat

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

Dima Dorogonov
Dima Dorogonov

Reputation: 2563

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

Solution:

  1. Comment temporary fetching or prerendering for this new locale (language JSON);
  2. Push code to prod;
  3. 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...

Upvotes: 0

jujule
jujule

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

Related Questions