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