// pages/category/[category]/[page].js import Link from 'next/link' import {useRouter} from 'next/router' import DefaultErrorPage from 'next/error' export async function getStaticProps({ params }) { // fetch data based on category and page const {products, totalPages} = await getProductsByCategory(params.category, params.page) return { props: { products, category: params.category currentPage: params.page, totalPages } } } export async function getStaticPaths() { return { // Opt-in to on-demand generation for non-existent pages fallback: true, paths: [ // return the paths needed here, this is just an example { params: { category: 'books', page: '1' } }, { params: { category: 'books', page: '2' } }, { params: { category: 'books', page: '3' } } ] } } export default function MyPage({products, currentPage, category, totalPages}) { const router = useRouter() // Show a loading state when the fallback is rendered if(router.isFallback) { return

Loading...

} // This includes setting the noindex header because static files always return a status 200 but the rendered not found page page should obviously not be indexed if(products.length === 0) { return <> } return <>

{product.title}

{product.description}

Go to page {index}

}

Loading...

{product.title}

Use Pagination with getStaticProps in Nextjs

Popular on Anna Coding

More Latest Articles