En este artículo, vamos a aprender cómo podemos agregar recursos compartidos web 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.
Enfoque: para agregar nuestro recurso compartido web, vamos a utilizar el paquete react-web-share. El paquete react-web-share nos ayuda a integrar el recurso compartido web en nuestra aplicación. Primero, instalaremos el paquete react-web-share y luego agregaremos un recurso compartido web en nuestra página de inicio.
Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app gfg
Paso 2: después de crear la carpeta de su proyecto, es decir, gfg, acceda a ella con el siguiente comando.
cd gfg
Paso 3: ahora instalaremos el paquete react-web-share usando el siguiente comando
npm i react-web-share
Estructura del proyecto: Se verá así.
Agregar el recurso compartido web: después de instalar el paquete, podemos agregar fácilmente el recurso compartido web en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar web share a nuestra página de inicio.
Ejemplo:
index.js
Javascript
import React from "react";
import { RWebShare } from "react-web-share";
export default function WebShareGfg() {
return (
<div>
<h1>NextJs Web Share - GeeksforGeeks</h1>
<RWebShare
data={{
text: "Web Share - GfG",
url: "http://localhost:3000",
title: "GfG",
}}
onClick={() => console.log("shared successfully!")}
>
<button>Share on Web</button>
</RWebShare>
</div>
);
};
Explicación: En el ejemplo anterior primero, estamos importando el componente RWebShare y luego, estamos usando el componente para agregar el recurso compartido web en nuestra aplicación.
Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.
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