Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

270
Views
NextJs: can't get the list items from paginated next pages urls using for loop in getStaticPaths

I need to visit the pagination URLs to get every list item in them and get all lists in one big array of objects to be able to pre-render in getStaticPaths(). After little thinking I decided to use for(..) loop in. Since the query string just asks for page number in the URL, I decided it would be the right solution.

My code:

export async function getStaticPaths() {
    let bookPages = [];
    for (let pageNo = 1; pageNo=5; pageNo ++) {
        const res = await axiosInstance.get(`/?page=${pageNo}`);
        const resultsList = await res.data.results;
        bookPages.push(resultsList);
    }

    const paths = bookPages.map((book) => ({
        params: { id: book.id.toString() },
    }))
    
    return { paths, fallback: false }
}

There are just 5 pages and no new data will be added. Every result response contains an array that has a list of 30 objects. I want to put all the 30 objects per URL to the one big array called bookPages, totaling 150 objects in the array, and use it to return paths.

When building, Nextjs collects page data for 60 seconds, then runs again as it fails to collect the data and throws this error:

> Build error occurred
Error: Collecting page data for /book/[id] is still timing out after 2 attempts. See more info here https://nextjs.org/docs/messages/page-data-collection-timeout

But if I request for only the first page, it builds properly.

    export async function getStaticPaths() {
        const res = await axiosInstance.get('/?page=1');
        const resultsList = await res.data.results;
    
        const paths = resultsList.map((book) => ({
            params: { id: book.id.toString() },
        }))

        return { paths, fallback: false }
}

Update:

I tried with Promise.all() in this manner but it failed the build:

let bookPages = [];
let links = [];
for (let paginate=1; paginate=5; paginate++) {
    links.push(`${process.env.NEXT_PUBLIC_URL}?page=${paginate}/`);
}
let requests = links.map(url => axios.get(url));
Promise.all(requests)
    .then(responses => responses.forEach(
        response => bookPages.push(response.data.results)
    ));
const paths = bookPages.map((book) => ({
    params: { id: book.id.toString() },
}))    
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!