I have a Link tag that redirects to another page along with a query item. What I want to do is use it in a getServerSideProps
function in order to make an API call with the query item.
Here's what the source code looks like:
import Navbar from "../components/Navbar"
import Footer from "../components/Footer"
import ProductCard from "../components/ProductCard"
import { useRouter } from "next/router"
import axios from "axios"
export default function products({productList}){
const router = useRouter()
const {category} = router.query
console.log(category)
return (
<>
<Navbar />
<div className="container-fluid p-0">
<div className="container text-center">
<h1 className="display-3">Starters</h1>
<div className="container text-center">
<div className="row">
{productList.map((Product) => (
<ProductCard key={Product.ID} Product={Product}></ProductCard>
))
}
</div>
</div>
</div>
</div>
<Footer></Footer>
</>
)
}
export const getServerSideProps = async () => {
const res = await axios.get(`http://192.168.0.112:3000/api/products/productShow`)
return {
props: {
productList: res.data,
},
}
}
How can I use the category
value inside getServerSideProps
so I can append it to my GET request?