How to Use rel next and rel prev Tags for Pagination in Next.js

Next.js automatically generates <link rel="next"> and <link rel="prev"> tags when you provide a pagination object in your page metadata, signaling page relationships to search engines and browsers.

Pagination is essential for organizing large datasets across multiple pages, but without proper semantic markup, search engines struggle to understand the sequence of content. The Next.js metadata API, as implemented in the vercel/next.js repository, simplifies this by automatically injecting rel next and rel prev tags into your document head when you configure pagination metadata.

How rel next and rel prev Work in Next.js

The framework handles pagination markup through its internal metadata generation pipeline. When a page exports a metadata object containing a pagination field with previous and next URLs, Next.js processes this during server-side rendering.

According to the source code in packages/next/src/lib/metadata/generate/basic.tsx (lines 110-113), the generateMetadata helper checks for the presence of metadata.pagination.previous and metadata.pagination.next. If these values exist, the function injects the corresponding HTML link tags:

<link rel="prev" href="{previous_url}" />
<link rel="next" href="{next_url}" />

This implementation ensures that pagination hints are present in the initial HTML payload, making them immediately available to search engine crawlers and accessibility tools.

Implementing Pagination Metadata in the App Router

For applications using the App Router, you define pagination by exporting a generateMetadata function that returns a Metadata object with a pagination property.

Basic App Router Example

Here is a complete implementation for a paginated blog listing:

// app/blog/[page]/page.tsx
import type { Metadata } from 'next';

export const generateMetadata = async ({
  params,
}): Promise<Metadata> => {
  const page = Number(params.page);
  const totalPages = 10; // Retrieve from your data source

  return {
    title: `Blog – Page ${page}`,
    pagination: {
      previous: page > 1 ? `/blog/${page - 1}` : undefined,
      next: page < totalPages ? `/blog/${page + 1}` : undefined,
    },
  };
};

export default function BlogPage({ params }: { params: { page: string } }) {
  // Render your paginated content here
  return <main>{/* Blog posts for page {params.page} */}</main>;
}

This configuration automatically generates the rel next and rel prev tags only when the respective pages exist, preventing invalid navigation links on the first and last pages of the series.

Implementing Pagination Metadata in the Pages Router

For the legacy Pages Router, you can achieve the same result by exporting a metadata object from your page component or using data fetching methods to calculate pagination values dynamically.

Static Metadata Export

// pages/articles/[page].tsx
import type { NextPage, GetStaticProps, GetStaticPaths } from 'next';

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [{ params: { page: '1' } }, { params: { page: '2' } }],
    fallback: 'blocking',
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const page = Number(params?.page ?? 1);
  const totalPages = 5;

  return {
    props: {
      page,
      totalPages,
    },
  };
};

export const metadata = ({ page, totalPages }: { page: number; totalPages: number }) => ({
  title: `Articles – Page ${page}`,
  pagination: {
    previous: page > 1 ? `/articles/${page - 1}` : undefined,
    next: page < totalPages ? `/articles/${page + 1}` : undefined,
  },
});

const ArticlesPage: NextPage<{ page: number; totalPages: number }> = ({
  page,
  totalPages,
}) => {
  return <div>Articles Page {page}</div>;
};

export default ArticlesPage;

Note that in the Pages Router, the metadata export can be a function that receives props to dynamically generate pagination links based on the current page context.

Why Use rel next and rel prev for SEO

Implementing proper pagination markup provides several technical benefits for search engine optimization and user experience:

• Crawl Efficiency: Search engines use rel next and rel prev to establish relationships between paginated pages, allowing them to consolidate indexing properties and avoid treating each page as duplicate content.
• Semantic Structure: These tags create a machine-readable sequence that helps browsers and assistive technologies understand the navigation flow of your content.
• Discovery: While Google announced in 2019 that it no longer uses these tags as a ranking factor, they still help with canonicalization and ensuring that search engines discover all pages in a paginated series, particularly for other search engines like Bing that may still utilize these signals.

Summary

• Next.js automatically generates <link rel="next"> and <link rel="prev"> tags when you provide a pagination object in page metadata.
• The implementation resides in packages/next/src/lib/metadata/generate/basic.tsx, where the generateMetadata helper processes pagination URLs during server-side rendering.
• For the App Router, export a generateMetadata function returning a Metadata object with pagination.previous and pagination.next properties.
• For the Pages Router, export a metadata object (or function) containing the same pagination structure.
• These tags improve SEO by helping search engines understand paginated content relationships and crawl your site more efficiently.

Frequently Asked Questions

What is the purpose of rel next tags?

The rel="next" tag indicates the URL of the next page in a paginated sequence. Search engines and browsers use this link relationship to understand the structure of multi-page content, helping crawlers discover subsequent pages and assisting users in navigating through ordered datasets.

How does Next.js generate rel next and rel prev tags?

Next.js generates these tags through its metadata generation pipeline. When a page exports metadata containing a pagination object with previous and next URLs, the generateMetadata function in packages/next/src/lib/metadata/generate/basic.tsx automatically injects the corresponding <link> elements into the document head during server-side rendering.

Can I use rel next with the Pages Router?

Yes, the Pages Router supports rel next and rel prev tags through the metadata export. You can export a static metadata object or a function that receives page props to dynamically generate pagination URLs. This works for both statically generated pages using getStaticProps and server-rendered pages using getServerSideProps.

Do search engines still use rel next and rel prev?

While Google announced in 2019 that it no longer uses rel next and rel prev as ranking signals, these tags remain valuable for SEO. They help search engines discover paginated content relationships, improve crawl efficiency by indicating page sequences, and provide semantic structure that benefits accessibility tools and other search engines like Bing that may still utilize these signals.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}