Next JS How to pass state to getStaticProps

Question

I am fetching games from IGDB database using getStaticProps. Everything works fine but now I want to implement searching games using text input and button. I am getting value from text input using onChange and I need to pass the state to the search query, but how I can do this outside the function? Here is the code:

export async function getStaticProps() {
    const response = await fetch(
        `https://api.igdb.com/v4/games/?fields=cover.*,name;search=${HERE I NEED TO PASS INPUT VALUE};`,
          {
            headers: {
                'Accept': 'application/json',
                'Client-ID': 'my client_id',
                'Authorization': 'Bearer my_authorization',
            }
        })
    const data = await response.json()
    return {
        props: {
            apiGames: data
        }
    }
}

const Library = ({ apiGames }) => {

  const [inputValue, setInputValue] = useState('')

  return (
    <input type="text" onChange={(e) => setInputValue(e.target.value)} placeholder='Start searching game...' />
  )
}

Answer 1

getStaticProps only runs at build time. You can fetch your initial data using this approach, but since your search params are generated on the client side, you will need to fetch your data on the client also. You can use the fetch api, or a library like axios