¿Cómo personalizar la paginación en NextJS?

En este artículo, aprenderemos cómo podemos agregar paginación personalizada en el proyecto NextJS usando Algolia. NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de rutas dinámicas ayuda a representar sus componentes NextJS de forma condicional.

Enfoque: para agregar nuestra paginación personalizada, primero vamos a crear una cuenta en algolia que nos permita buscar contenido en milisegundos. Después de eso, obtendremos las claves API que usaremos más adelante en nuestra aplicación. Luego crearemos un nuevo índice para cargar nuestros datos. En la página de inicio de nuestra aplicación, buscaremos los datos de algolia usando las claves API y el módulo de búsqueda de algolia. Luego crearemos nuestra paginación personalizada.

Crear aplicación NextJS:

Paso 1: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Paso 2: Para agregar la búsqueda de Algolia en nuestro proyecto vamos a instalar dos módulos:

npm install algoliasearch react-instantsearch-dom @material-ui/core @material-ui/lab

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso 3: Configuración de Algolia. Algolia permite a los desarrolladores crear aplicaciones de próxima generación con API que entregan contenido relevante en milisegundos. Entonces, para usar algolia, primero cree una cuenta gratuita y obtenga las claves API de esa cuenta.

1. Para obtener las claves API, vaya a configuración > Claves API

2. Después de eso, cree un índice y cargue los datos que desea buscar. Puede cargar los datos en formato json, csv o mediante su API.

Para este ejemplo, estoy cargando los siguientes datos.

Title, Tag, Day
GFG1, python, Monday
GFG2, java, Tuesday
GFG3, css, Wednesday
GFG4, html, Thursday
GFG5, react, Friday
GFG6, nextjs, Saturday

Paso 4: ahora crearemos una paginación personalizada para nuestra aplicación. Para ello, crearemos un nuevo archivo dentro de una nueva carpeta de componentes con el siguiente contenido. 

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Pagination from '@material-ui/lab/Pagination';
import { connectPagination } from 'react-instantsearch-dom';
  
const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      marginTop: theme.spacing(2),
    },
      
  },
    
}))
  
function Pagin({ currentRefinement, 
    nbPages, refine, createURL }) {
  const classes = useStyles();
  const handleChange = (event, value) => {
    event.preventDefault();
    refine(value);
  };
  
  return (
    <div className={classes.root} >
      <Pagination count={nbPages} shape="rounded" 
        onChange={handleChange} />
              
    </div>
            
  );
}
  
  
export default connectPagination(Pagin);

Paso 5: Ahora podemos usar la API para agregar la paginación personalizada en el Proyecto NextJs. Después de eso, para usar nuestra paginación personalizada, agregaremos el siguiente código en el archivo index.js.

// Importing modules
import algoliasearch from "algoliasearch/lite";
import { InstantSearch, Hits, Configure }
         from "react-instantsearch-dom";
import Pagination from "../components/CustomPagination";
  
const searchClient = algoliasearch(
  APPLICATION_API_KEY,
  SEARCH_ONLY_API_KEY,
);
  
export default function CustomizedFilter() {
  return (
    <>
      <InstantSearch 
        searchClient={searchClient} 
        indexName="gfg_dev">
  
          
        <Configure hitsPerPage={3}/>
        {/* Adding Data */}
        <Hits />
        {/* Adding Pagination */}
        <Pagination totalPages={5}/>
      </InstantSearch>
    </>
  );
}

También puede agregar estilo usando CSS en nuestra Paginación personalizada.

Pasos para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando en la terminal.

npm run dev

Producción: