Next.js getInitialProps context query is empty

Total
1
Shares

I’m following this basic tutorial about Next.js.

They provide this code:

 Post.getInitialProps = async function(context) {
  const { id } = context.query;
  const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
  const show = await res.json();

  console.log(`Fetched show: ${show.name}`);

  return { show };
};

which I have copy-pasted. However context.query is an empty object, so, my api call is failing.
Here’s the code from wehre I’m redirecting to that dynamic page (pages/p/[id].js)

 <Layout>
<h1>Batman TV Shows</h1>
<ul>
  {props.shows.map(show => (
    <li key={show.id}>
      <Link href="/p/[id]" as={`/p/${show.id}`}>
        <a>{show.name}</a>
      </Link>
    </li>
  ))}
</ul>


</Layout>

is this a bug, or am I missing something?


Solution

Ok, the answer is to update from v8.0.4 to v9.0.1 or newer. The tutorial here clearly states it

Leave a Reply

Your email address will not be published. Required fields are marked *