¿Cómo agregar filtros en Next.js usando Algolia?

En este artículo, aprenderemos cómo podemos agregar filtros 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 nuestros filtros 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 con los widgets de filtro de algolia usando las claves API y el módulo de búsqueda de algolia.

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

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 filtrar. 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

Agregar filtro de casilla de verificación: puede agregar fácilmente filtros de casilla de verificación utilizando el widget RefinementList de algolia. Con este widget, el usuario puede filtrar el conjunto de datos según los valores de las facetas. El widget solo muestra los valores de las facetas más relevantes para el contexto de búsqueda actual. Ahora agregaremos el siguiente código en nuestro archivo index.js . En el siguiente código, primero importamos nuestra RefinementList y luego llamamos a nuestra RefinementList con el atributo Título.

import algoliasearch from "algoliasearch/lite";
import { InstantSearch, RefinementList , Hits } from 
    "react-instantsearch-dom";
  
const searchClient = algoliasearch(
  "API_KEY",
  "SEARCHABLE_KEY",
);
  
export default function SearchBar() {
  return (
    <>
      <InstantSearch 
        searchClient={searchClient} 
        indexName="gfg_dev">
        <RefinementList attribute="Title" />
        <Hits />
      </InstantSearch>
    </>
  );
}

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente código.

npm run dev

Producción:

Agregar filtro al hacer clic: puede agregar fácilmente filtros al hacer clic con el widget Menú de algolia. Con este widget, el usuario puede filtrar el conjunto de datos según los valores de las facetas. El widget solo muestra los valores de las facetas más relevantes para el contexto de búsqueda actual. Ahora agregaremos el siguiente código en nuestro archivo index.js . En el siguiente código, primero, estamos importando nuestro Menú y después de eso, estamos llamando a nuestro Menú con el atributo Título.

import algoliasearch from "algoliasearch/lite";
import { InstantSearch, Menu , Hits } from "react-instantsearch-dom";
  
const searchClient = algoliasearch(
  "API_KEY",
  "SEARCHABLE_KEY",
);
  
export default function SearchBar() {
  return (
    <>
      <InstantSearch 
        searchClient={searchClient} 
        indexName="gfg_dev">
        <Menu attribute="Title" />
        <Hits />
      </InstantSearch>
    </>
  );
}

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente código.

npm run dev

Producción:

Agregar filtro desplegable: puede agregar fácilmente filtros desplegables utilizando el widget MenuSelect de algolia. Con este widget, el usuario puede filtrar el conjunto de datos según los valores de las facetas. El widget solo muestra los valores de las facetas más relevantes para el contexto de búsqueda actual. Ahora agregaremos el siguiente código en nuestro archivo index.js. En el siguiente código, primero estamos importando nuestro MenuSelect y luego llamamos a nuestro MenuSelect con el atributo Título.

import algoliasearch from "algoliasearch/lite";
import { InstantSearch, MenuSelect , Hits } from "react-instantsearch-dom";
  
const searchClient = algoliasearch(
  "API_KEY",
  "SEARCHABLE_KEY",
);
  
export default function SearchBar() {
  return (
    <>
      <InstantSearch 
        searchClient={searchClient} 
        indexName="gfg_dev">
        <MenuSelect attribute="Title" />
        <Hits />
      </InstantSearch>
    </>
  );
}

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente código.

npm run dev

Producción: