¿Cómo agregar botones para compartir en redes sociales en NextJS?

En este artículo, vamos a aprender cómo podemos agregar botones Social Share en NextJs. Usando el botón de compartir en redes sociales, el usuario puede compartir su contenido en diferentes sitios de redes sociales.

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 botones Social Share, vamos a utilizar el paquete next-share. El paquete next-share nos ayuda a integrar 19 sitios de redes sociales en los que los usuarios pueden compartir su contenido con un clic. Entonces, primero, instalaremos el paquete next-share y luego agregaremos diferentes botones para compartir en redes sociales en nuestra página de inicio usando el paquete next-share.

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 next-share usando el siguiente comando:

npm i next-share

Estructura del proyecto: Se verá así.

Agregar los botones para compartir en redes sociales: después de instalar el paquete next-share, podemos agregar fácilmente diferentes botones para compartir en redes sociales en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar botones para compartir en redes sociales a nuestra página de inicio.

Agregue el siguiente contenido en el archivo index.js :

import React from 'react'
import {
  FacebookShareButton,
  FacebookIcon,
  PinterestShareButton,
  PinterestIcon,
  RedditShareButton,
  RedditIcon,
  WhatsappShareButton,
  WhatsappIcon,
  LinkedinShareButton,
  LinkedinIcon,
} from 'next-share';
  
export default function Text() {
  return (
    <div>
      <h1>Social Share - GeeksforGeeks</h1>
      <FacebookShareButton
        {/* Url you want to share */}
        url={'http://localhost:3000'} >
        <FacebookIcon size={32} round />
      </FacebookShareButton>
      <PinterestShareButton
        {/* Url you want to share */}
        url={'http://localhost:3000'} >
        <PinterestIcon size={32} round />
      </PinterestShareButton>
      <RedditShareButton
        {/* Url you want to share */}
        url={'http://localhost:3000'} >
        <RedditIcon size={32} round />
      </RedditShareButton>
      <WhatsappShareButton
        {/* Url you want to share */}
        url={'http://localhost:3000'} >
        <WhatsappIcon size={32} round />
      </WhatsappShareButton>
      <LinkedinShareButton
        {/* Url you want to share */}
        url={'http://localhost:3000'} >
        <LinkedinIcon size={32} round />
      </LinkedinShareButton>
    </div>
  )
}

Explicación: En el ejemplo anterior primero, estamos importando diferentes botones para compartir en redes sociales de nuestro paquete de próxima acción y luego estamos usando esos botones en nuestro componente Texto. Puede agregar la URL que desea compartir en el parámetro de URL de cada botón.

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

npm run dev

Producción: