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?

Answer 1

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.