En este artículo, aprenderemos cómo podemos buscar características 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 función de búsqueda 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 el widget de búsqueda 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 algoliasearchreact-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 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 podemos usar la API para agregar la función de búsqueda en el Proyecto NextJs. Después de eso, para usar nuestra barra de búsqueda, agregaremos el siguiente código en el archivo index.js .
Javascript
// Importing modules
import algoliasearch from "algoliasearch/lite";
import { InstantSearch, SearchBox, Hits }
from "react-instantsearch-dom";
const searchClient = algoliasearch(
APPLICATION_API_KEY,
SEARCH_ONLY_API_KEY,
);
export default function SearchBar() {
return (
<>
<InstantSearch
searchClient={searchClient}
indexName="gfg_dev">
{/* Adding Search Box */}
<SearchBox />
{/* Adding Data */}
<Hits />
</InstantSearch>
</>
);
}
Paso para ejecutar la aplicación: ahora ejecute el siguiente código en la terminal para iniciar la aplicación en el servidor de desarrollo: –
npm run dev
Producción:
Publicación traducida automáticamente
Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA