Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

278
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda