How To apply filters and pagination in getserversideprops in next js

user_12535191 0
Viewed 400

I am trying to apply filter and pagination on my product list page. but I don't know how to pass values to getServersideprops same as when we fetch data in useEffect and pass the updated values as dependency in react js

Here is my Code Thanks in advance


export const getServerSideProps = async () => {

  const res = await fetch(`http://localhost:4000/api/products?page=1&limit=20&sortBy=price&sortAs=asc`);
  const data = await res.json();

  return {
    props: {productsData: data}
  }
}


function Home({ productsData}) {

  const products =  productsData?.data.products &&  productsData.data.products?.map((item) => {
    return item
  })
  

  return (
    <>
      <h1>Latest Products</h1>
        <Row>
          {products.map((product) => (
            <Col key={product.id} sm={12} md={6} lg={4} xl={3}>
              <Card className="my-3 p-3 rounded">
                <Link href={`/product/${product.id}`}>
                  <Card.Img src={product.image} variant="top" />
                </Link>

                <Card.Body>
                  <Link href={`/product/${product.id}`}>
                    <Card.Title as="div">
                      <strong>{product.name}</strong>
                    </Card.Title>
                  </Link>

                  <Card.Text as="div">
                    <Rating
                      value={product.rating}
                      text={`${product.numReviews} reviews`}
                    />
                  </Card.Text>

                  <Card.Text as="h3">${product.price}</Card.Text>
                </Card.Body>
              </Card>
            </Col>
          ))}
        </Row>
    </>
  );

}


export default Home
next.js reactjs rest pagination javascript
1 Answers

You can use URL parameters and get it in getServerSideProps

export async function getServerSideProps({ query }) {
const limit = query.limit;
const page = query.page;
  const res = await fetch(`http://localhost:4000/api/products?page=${page}&limit=${limit}&sortBy=price&sortAs=asc`);
  const data = await res.json();

  return {
    props: {productsData: data,page,limit}
  }
}
user_98622060
Related