How to implement pagination in Next.js

Implementing pagination in Next.js involves a combination of frontend and backend logic. Here, I'll provide a basic example using a simple API endpoint and client-side navigation. In this example, I'll use the GitHub API to fetch a list of repositories.

1. Install Axios (or another HTTP library):

   You can use any HTTP library of your choice. In this example, I'll use Axios.

   bashCopy code
   npm install axios
   

2. Create a new page in the pages directory:

   Create a new file in the pages directory, for example, pages/index.js.

3. Set up the pagination logic:

   In your index.js file, set up the pagination logic. You can use state to manage the current page and fetch data accordingly.

   jsxCopy code
   // pages/index.js
   import { useState } from 'react';
   import axios from 'axios';
   
   const API_URL = 'https://api.github.com/search/repositories';
   
   const Home = ({ data }) => {
     const [currentPage, setCurrentPage] = useState(1);
     const perPage = 10;
   
     const fetchData = async (page) => {
       try {
         const response = await axios.get(`${API_URL}?q=next.js&page=${page}&per_page=${perPage}`);
         return response.data.items;
       } catch (error) {
         console.error('Error fetching data:', error);
         return [];
       }
     };
   
     const handleNextPage = async () => {
       const nextPageData = await fetchData(currentPage + 1);
       setCurrentPage(currentPage + 1);
       // Handle nextPageData, e.g., update state with the new data
     };
   
     const handlePrevPage = async () => {
       if (currentPage > 1) {
         const prevPageData = await fetchData(currentPage - 1);
         setCurrentPage(currentPage - 1);
         // Handle prevPageData, e.g., update state with the new data
       }
     };
   
     return (
       <div>
         <h1>GitHub Repositories</h1>
         {/* Render your data here */}
         <button onClick={handlePrevPage} disabled={currentPage === 1}>
           Previous Page
         </button>
         <button onClick={handleNextPage}>Next Page</button>
       </div>
     );
   };
   
   export default Home;
   

4. Fetch initial data during server-side rendering (optional):

   If you want to fetch initial data during server-side rendering, you can use the getServerSideProps function. This function runs on every request and can fetch data to pass to your component.

   jsxCopy code
   // pages/index.js
   import { useState } from 'react';
   import axios from 'axios';
   
   const API_URL = 'https://api.github.com/search/repositories';
   
   const Home = ({ data }) => {
     // ... (same as above)
   
     return (
       <div>
         <h1>GitHub Repositories</h1>
         {/* Render your data here */}
         <button onClick={handlePrevPage} disabled={currentPage === 1}>
           Previous Page
         </button>
         <button onClick={handleNextPage}>Next Page</button>
       </div>
     );
   };
   
   export const getServerSideProps = async () => {
     const initialData = await fetchData(1); // Fetch initial data for the first page
     return {
       props: {
         data: initialData,
       },
     };
   };
   
   export default Home;
   

5. Style and Render Data:

   Style and render your data as needed based on your UI requirements.

This is a basic example, and you may need to adapt it to your specific use case. Depending on your application's complexity, you might want to consider more advanced techniques such as client-side rendering (CSR) using getStaticProps or getStaticPaths.