Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

279
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda