close

PrevNextPage

Warning

This component is mainly used in conjunction with wrap/eject in Custom Theme , and is different from components that are directly imported in MDX. You can modify the styles and functions by passing component props or directly overriding the component. If you override the entire component through eject, please note that the reading of the corresponding configuration options of the component will become invalid and you need to control it yourself.

PrevNextPage renders the prev/next page navigation links at the bottom of the page.

Usage

This component doesn't accept any props and automatically calculates prev/next page links based on sidebar order.

How it works

The component internally uses the usePrevNextPage hook to get prev and next page information:

import { usePrevNextPage } from '@theme';

const { prevPage, nextPage } = usePrevNextPage();
// prevPage: { text: string; link: string } | null
// nextPage: { text: string; link: string } | null
  • Prev/next pages are automatically calculated based on the current page's position in the sidebar
  • If the current page is the first page, prevPage will be null
  • If the current page is the last page, nextPage will be null