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?