How to get data POST method in next js [duplicate] - reactjs

Question

This question already has an answer here:
How to access route parameter inside getServerSideProps in Next.js?
(1 answer)
Closed 1 year ago.
I have created simple application, I passed number value menuApi.js to [catId].js, after can't pass catId value is 26(i.e)http://localhost:3000/category/26, Now I pass catId inside of getServersideProps method but not working. What I am missing.
menuApi.js
import React, { Component } from 'react';
import { Grid, Image } from "semantic-ui-react";
import Link from 'next/link';
function MenuApi(props) {
return (
<Grid className="home-icon">
<Grid.Row centered doubling columns={8} mobile>
{props.menu.map((x, i) => (
<Grid.Column centered key={i} Style="width: 9%!important;">
<Link
href={'/category/'+x.id}
>
<Image src={x.image} alt=""/>
</Link>
<Link href={x.category_url}>
<p >{x.store_name}</p>
</Link>
</Grid.Column>
))}
</Grid.Row>
</Grid>
)
}
export default MenuApi;
[catId].js
import { useRouter } from 'next/router'
const Post = (props) => {
console.log(props.ruslt)
return <p>Post: {storeId}</p>
}
const router = useRouter()
const { storeId } = router.query
export async function getServerSideProps(context) {
const offerList = await fetch('http://localhost:3000/api/v4/web/list',{
method:'POST',
body: JSON.stringify(storeId),
headers: { "Content-Type": "application/json" },
})
const offerData = await offerList.json();
const result=offerData.stores;
return {
props: {
result,
},
};
}
export default Post

Answer 1

You are using useRouter hook outside of a functional component. Hooks can only be used inside of a functional component instead of getServerSideProps .
It should be like this:
const Post = (props) => {
const router = useRouter()
const { storeId } = router.query
console.log(props.result)
return <p>Post: {storeId}</p>
}
Also, you should use getStaticProps instead of getServerSideProps. getServerSideProps will render the page on each request, so your response time will increase.
Instead use getStaticProps which will pre-render your page so response time will reduce.
Data Fetching in Next

Answer 2

The following code should fix it. You seem to be passing the props wrong from the getServerSideProps function
import { useRouter } from 'next/router'
const Post = (props) => {
console.log(props.result)
return <p>Post: {props.storeId}</p>
}
const router = useRouter()
const { storeId } = router.query
export async function getServerSideProps(context) {
const offerList = await fetch('http://localhost:3000/api/v4/web/list',{
method:'POST',
body: storeId,
headers: { "Content-Type": "application/json" },
})
const offerData = offerList;
const result=offerData.stores;
return {
props: {
result,
storeId
},
};
}
export default Post