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() },
}))