Next.js: How to create a dynamic route for all pages present from the API?

Question

Greetings to everyone,

I have just started to learn NodeJS and have been experimenting on API routes in NextJS as its easy to setup and see what's actually going on, So I know how to make a basic get request but I'm interested in something a little complex.

So I'm trying to build an API route that can be filleted by page number, so for example api/pages/1 would return page 1 and so on.

so this is my file in /api/game.js

export default async function handler(req,res) {
    const response = await fetch('https://exampleapi.com/pages/?sort=&page=1&per_page=50')
    const jsonData = await response.json();
    res.status(200).json(jsonData);
}

Now this works obviously but I want to know how I can make dynamic routes for all the pages. Since I'm using an external API I'm not sure how many pages exist at any moment.

So far I have created another folder and called the file [gamepage].js, I'm not sure how I would manipulate the fetch call in the game.js file in here.

export default async function handler(req, res) {
    const { pno } = req.query
    console.log(pro)
    const response = await fetch(`https://exampleapi.com/pages/?sort=&page=${pno}&per_page=50`)
    const jsonData = await response.json();
    res.status(200).json(jsonData);
  }

Sorry if the question is too beginner level, I'm just getting started with backend JS.

Answer 1

I got it to work, I was just missing the gamepage from req.query

   const { pno } = req.query.gamepage

this did it.