SO I been learning NextJS API routes and NodeJS recently, While I do know how to create dynamic routes now, I have some issues with a few things -
This is my api/matches.js file.
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default async function handler(req, res) {
const response = await fetch(`https://exampleapi.com/?&token=# `)
const jsonData = await response.json();
res.status(200).json(jsonData);
}
Now, I have another dynamic route for this API which fetches the match by a match slug, So this file was called /api/matches/[...matchslug].js
export default async function handler(req, res) {
const page = req.query.matchslug
const response = await fetch(`https://examleapi.com/?search[slug]=${page}&token=# `)
const jsonData = await response.json();
While this dynamic route fetches the result of one so if I went matches/exampelmatch, I do get the results for the examplematch, However I'm looking to somehow implement it in a way that
matches/examplematch1/examplematch2
Returns the data from the examplematch1 & examplematch2.
I'm not sure if building something like is possible, But very interested.
Thank you for your time and patience.
In your /api/matches/[...matchslug].js example, the value of matchslug will always be an array.
Instead of passing the page variable directly into fetch, you can map over the values in the matchslug array and use Promise.all to request each resource.
It would look something like this (I haven't tested this):
export default async function handler(req, res) {
const promiseArray = req.query.matchslug.map(async (slug) => {
const response = await fetch(`https://examleapi.com/?search[slug]=${slug}&token=# `)
const jsonData = await response.json();
return jsonData
})
const result = await Promise.all(promiseArray)
res.status(200).json(result);
}