useRouter(); inside getServerSideProps :next js

user_17513486 0
Viewed 1755

i am trying to use get getServerSideProps in my code and i am not able to do it beacuse 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 tryed https://codesandbox.io/s/youthful-lucy-427g1?file=/src/App.js

i am new to next js and and i have no much knowlage of next js so pls dont tell me to read the docs if i undersand the docs i woulmd be asking this question

next.js reactjs javascript
2 Answers

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,
    },
  };
}
user_116030040

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,
    },
  };
}
user_132604360
Related