This example shows how to implement page based pagination with SSG in Next.js.
https://pagination-with-ssg.vercel.app
The first 5 paginated pages are cached in the edge at build time, and the rest are incrementally cached using ISR, that way we can avoid increasing build times no matter how many pages we have while still keeping essential pages cached from the start.
The example showcases a PLP (Product Listing Pages) where:
getStaticPaths
// pages/category/[page].tsxexport const getStaticPaths = async () => {return {// Prerender the next 5 pages after the first page, which is handled by the index page.// Other pages will be prerendered at runtime.paths: Array.from({ length: 5 }).map((_, i) => `/category/${i + 2}`),// Block the request for non-generated pages and cache them in the backgroundfallback: 'blocking',}}
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
Execute create-next-app
with pnpm to bootstrap the example:
pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/pagination-with-ssg
Next, run Next.js in development mode:
pnpm dev
Deploy it to the cloud with Vercel (Documentation).
This example shows how to implement page based pagination with SSG in Next.js.
https://pagination-with-ssg.vercel.app
The first 5 paginated pages are cached in the edge at build time, and the rest are incrementally cached using ISR, that way we can avoid increasing build times no matter how many pages we have while still keeping essential pages cached from the start.
The example showcases a PLP (Product Listing Pages) where:
getStaticPaths
// pages/category/[page].tsxexport const getStaticPaths = async () => {return {// Prerender the next 5 pages after the first page, which is handled by the index page.// Other pages will be prerendered at runtime.paths: Array.from({ length: 5 }).map((_, i) => `/category/${i + 2}`),// Block the request for non-generated pages and cache them in the backgroundfallback: 'blocking',}}
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
Execute create-next-app
with pnpm to bootstrap the example:
pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/pagination-with-ssg
Next, run Next.js in development mode:
pnpm dev
Deploy it to the cloud with Vercel (Documentation).