I am designing a page where the user enters some search query in and data about that query is then given to the user, my idea for doing this was building out a client component that handles the user entering in query information and then dynamically routing the user to a new page where the information is then fetched on the server side, the issue with this is the API I am using cannot fetch the data with keywords it needs an ID so what I have a is a local json file with all the keywords and their corresponding ID so I can then properly make the request my issue is I first need to build some sort of function that requests data from my local json file in my client component but im not quite sure how to do that I looked that this documentation
https://vercel.com/guides/loading-static-file-nextjs-api-route
but this only tells me how to do this in a server component so what should I do to fetch data from my local json file on the client? or maybe this approach could be replaced with something better I am not thinking of maybe some sort of API route?