How to add Web Share in Next.js ?

The Web Share API enables web applications to share content (like URLs, text, or files) to other apps installed on a user's device, such as social media platforms, messaging apps, or email clients. Integrating the Web Share API into a Next.js project enhances user experience by providing a seamless way to share content directly from the web application.

In this article, we are going to learn how we can add web share in NextJS.

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.

Steps to Add Web Share in Next.js App

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:

The updated dependencies in the package.json file are:

"dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "react-web-share": "^2.0.2"
}

Example: This example demonstrates adding the webshare in next js application with the help of react-web-share npm package.

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: