How to get data POST method in next js

Question

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

Does this answer your question: [How to access route parameter inside getServerSideProps in Next.js?](https://stackoverflow.com/a/69059032/1870780)? Your dynamic route is `[catId].js` so you need to retrieve the param as `context.params.catId` inside `getServerSideProps`. — juliomalves, Sep 29 '21 at 18:32

Ishan Bassi · Answer 1 · 2021-09-29T11:38:28.670

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

score -1 · Answer 2 · answered Sep 29 '21 at 06:44

-1

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

answered Sep 29 '21 at 06:44

sanair96

39
1
7

I followed above code but error showing this error Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks – karthik Sep 29 '21 at 06:56
Anybody help me please – karthik Sep 29 '21 at 10:40
Yeah, you had to rearrange the code a bit – sanair96 Jan 21 '22 at 13:33

How to get data POST method in next js

2 Answers2