Create pagination in next.js

To create pagination in Next.js, you can follow these steps:

1. Determine the number of items you want to display per page and the total number of items.
2. Create a page component that will display the items for each page. This component will receive two props: items, an array of items to display, and page, the current page number.
3. In your main page component, import the useRouter hook from the next/router module to get access to the current URL.
4. Extract the current page number from the URL using the query property of the useRouter hook.
5. Calculate the number of pages based on the total number of items and the items per page.
6. Render a list of page numbers, with each number linking to the corresponding page.
7. Render the page component with the appropriate items based on the current page number.

Here’s an example implementation:

import { useRouter } from 'next/router';

const PAGE_SIZE = 10;

function Page({ items, page }) {
  const startIndex = (page - 1) * PAGE_SIZE;
  const endIndex = startIndex + PAGE_SIZE;
  const displayedItems = items.slice(startIndex, endIndex);

  return (
    <div>
      <ul>
        {displayedItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default function MyPage({ items }) {
  const router = useRouter();
  const { query } = router;
  const currentPage = query.page ? parseInt(query.page, 10) : 1;
  const numPages = Math.ceil(items.length / PAGE_SIZE);

  return (
    <div>
      <ul>
        {Array.from({ length: numPages }, (_, i) => (
          <li key={i}>
            <Link href={`/?page=${i + 1}`}>
              <a>{i + 1}</a>
            </Link>
          </li>
        ))}
      </ul>
      <Page items={items} page={currentPage} />
    </div>
  );
}