Pagination - Next / Previous

[timfullerton2]

I've tried out a few methods to get pagination to work but I'm definitely missing something. Is there a straightforward method to access archived blog pages (i.e. /blog/page/2, /blog/page/3) through a simple "Next" and "Previous" pagination setup? The infinite loading method isn't ideal for SEO. Any examples someone could provide? Thank you!

[blakewilson]

Hi @timfullerton2, have you seen the pagination guide that @Fran-A-Dev created?

https://faustjs.org/reference/add-pagination-to-your-faust-js-site

[timfullerton2]

Hi @blakewilson I have seen that demo and a couple of others with the infinite scroll/load more option. I was hoping to figure out a method to setup the archived pages so these can be indexed. The structure I have currently is:
/pages/blog/index.js
/pages/blog/page/[pageNumber].js

Here's the [pageNumber].js file I have so far but I can't quite figure out how to query each set of 10 posts based on the page number:
`import { useRouter } from 'next/router';
import Link from 'next/link';
import { gql, useQuery } from '@apollo/client';
import { BlogInfoFragment } from '../../../fragments/GeneralSettings';
import { NavigationMenu, FeaturedImage, Post } from '../../../components';
import * as MENUS from '../../../constants/menus';

// Define your GraphQL query here (adjusted as per your setup)
const GET_POSTS_BY_PAGE = gqlquery GetPostsByPage($first: Int, $after: String) { posts(first: $first, after: $after) { edges { node { id title content date uri featuredImage { node { sourceUrl } } author { node { name } } } } pageInfo { hasNextPage endCursor } } };

const POSTS_PER_PAGE = 10;

export default function BlogPage() {
const router = useRouter();
const { pageNumber } = router.query;
const pageIndex = parseInt(pageNumber, 10);

// Since we don't have cursors for direct access, we use the page index to simulate "next" and "previous" functionality
// This is a simplification and might not perfectly align with cursor-based pagination if pages are not accessed sequentially
const { data, loading, error } = useQuery(GET_POSTS_BY_PAGE, {
variables: {
first: POSTS_PER_PAGE,
after: pageIndex === 1 ? null : (pageIndex - 1) * POSTS_PER_PAGE, // This is a placeholder and not the correct way to use 'after' with cursors
},
});

if (loading) return

Loading...

;
if (error) return

Error: {error.message}

;

const posts = data.posts.edges;
const { hasNextPage } = data.posts.pageInfo;

return (

{/* Render your posts here */}
{posts.map(({ node }) => (

))}

  {/* Pagination Links */}
  <div>
	{pageIndex > 1 && (
	  <Link href={`/blog/page/${pageIndex - 1}`}>
		Previous
	  </Link>
	)}
	{hasNextPage && (
	  <Link href={`/blog/page/${pageIndex + 1}`}>
		Next
	  </Link>
	)}
  </div>
</div>

);
}
`