How to add Web Share in Next.js ?

In this article, we are going to learn how we can add web share in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.

Approach: To add our web share we are going to use the react-web-share package. The react-web-share package helps us to integrate the web share in our app. So first, we will install the react-web-share package and then we will add a web share on our homepage.

Step 1: Create a React application using the following command.

npx create-react-app gfg

Step 2: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

Step 3: Now we will install the react-web-share package using the below command

npm i react-web-share

Project Structure: It will look like this.

Adding the Web Share: After installing the package we can easily add web share on any page in our app. For this example, we are going to add web share to our homepage.

Example:

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>
    );
};

Explanation: In the above example first, we are importing the RWebShare component and after that, we are using the component to add the web share in our app.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output: