¿Cómo agregar Resaltador de texto en Next.js?

En este artículo, vamos a aprender cómo podemos agregar Text Highlighter en NextJs. 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 nuestro Resaltador de texto, vamos a usar el paquete reaccionar-resaltar-palabras. El paquete react-highlight-words nos ayuda a agregar un resaltador de texto en cualquier lugar de nuestra aplicación. Primero, instalaremos el paquete react-highlight-words y luego agregaremos un resaltador de texto en nuestra página de inicio.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJs usando el siguiente comando:

npx create-next-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-drag-drop-files usando el siguiente comando:

npm i react-highlight-words

Estructura del proyecto: Se verá así.

Agregar File Dropper: después de instalar el paquete react-highlight-words, podemos agregar fácilmente Text Highlighter en nuestra aplicación. Para este ejemplo, vamos a agregar un resaltador de texto a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import Highlighter from "react-highlight-words";
import React from 'react'
  
export default function TextHighlighter() {
  return (
    <div>
      <h3>GeeksforGeeks - Highlighter</h3>
      <Highlighter
        highlightClassName="YourHighlightClass"
        searchWords={["Gfg", "text"]}
        autoEscape={true}
        textToHighlight="This is text for GfG example"
      />
    </div>
  )
}

Explicación: en el ejemplo anterior primero, estamos importando nuestro componente Highlighter desde el paquete instalado. Después de eso, estamos usando el componente Resaltador dentro de una nueva función. Podemos ingresar las palabras que queremos resaltar en la propiedad searchWords y nuestro texto en la propiedad textToHighlight.

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

npm run dev

Producción: