How to access query params inside getServerSideProps in Next.js?

Question

I am trying to use get getServerSideProps in my code and I am not able to do it because I am not able to pass router.query.itmid .

export async function getServerSideProps() {
  // Call an external API endpoint to get posts.
  const router = useRouter();
  var id = router.query.itmid;
  // You can use any data fetching library

  const res = await fetch("https://ask-over.herokuapp.com/questone/" + id);
  console.log("check");
  console.log("dada");
  const posts = await res.json();

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  };
}

Here is what I tried https://codesandbox.io/s/youthful-lucy-427g1?file=/src/App.js

I am new to Next.js and and I have no much knowledge of Next.js so please don't tell me to read the docs if I understand the docs I wouldn't be asking this question.

Answer 1

You should use context in getServerSideProps to get query params

export async function getServerSideProps(ctx) {
  // Call an external API endpoint to get posts
  var id = ctx.query.itmid;
  // You can use any data fetching library

  const res = await fetch("https://ask-over.herokuapp.com/questone/" + id);
  console.log("check");
  console.log("dada");
  const posts = await res.json();

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  };
}

Answer 2

useRouter is used for client side routing and can be used at client side and getServerSideProps will be executed at server side.

Due to this reason you can't use useRouter() in getServerSideProps.

If you want to access the query parameters in getServerSideProps then you can use context.query.[parameter], so your code will looks like

export async function getServerSideProps(ctx) {
  // Call an external API endpoint to get posts
  var id = ctx.query.itmid;
  // You can use any data fetching library

  const res = await fetch("https://ask-over.herokuapp.com/questone/" + id);
  console.log("check");
  console.log("dada");
  const posts = await res.json();

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  };
}