Pagination

15-30 minIntermediate

Implement SEO-friendly pagination handling canonical tags and route parameters.

Prerequisites

Dynamic routing knowledge

Intermediate Recommended

Search Parameters

Using ?page= query strings.

Handling Params

Use searchParams prop in your page component to read the current page.

Pass this to your API/CMS query to fetch the correct data subset.

Example

export default function Page({ searchParams }: { searchParams: { page?: string } }) {
  const currentPage = Number(searchParams.page) || 1;
  // fetch data...
}

Canonical Tags

Ensure the self-referencing canonical tag includes the page parameter.

Ideally, the root page (page 1) should canonicalize to the clean URL without parameters.

Example

export async function generateMetadata({ searchParams }) {
  const page = searchParams.page;
  return {
    alternates: {
      canonical: page ? `?page=${page}` : '/blog',
    },
  }
}

Verification Checklist

Navigate to paginated pages (e.g., ?page=2) and check content changes.
Inspect the <link rel="canonical"> tag in the head.
Verify prev and next links are not strictly required by Google anymore but good for UX.