In this article, we are going to learn how we can add Social Share buttons in NextJs. Using the social share button user can share your content in different social media sites.
NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.
Approach: To add our Social Share buttons we are going to use the next-share package. The next-share package helps us to integrate 19 social media sites in which users can share your content within a click. So first, we will install the next-share package and then we will add different social share buttons on our homepage using the next-share package.
Create NextJS Application: You can create a new NextJs project using the below command:
npx create-next-app gfg
Install the required package: Now we will install the next-share package using the below command:
npm i next-share
Project Structure: It will look like this.
Adding the Social Share Buttons: After installing the next-share package we can easily add different social share buttons on any page in our app. For this example, we are going to add social share buttons to our homepage.
Add the below content in the index.js file:
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 - neveropen</h1> <FacebookShareButton {/* Url you want to share */} <FacebookIcon size={32} round /> </FacebookShareButton> <PinterestShareButton {/* Url you want to share */} <PinterestIcon size={32} round /> </PinterestShareButton> <RedditShareButton {/* Url you want to share */} <RedditIcon size={32} round /> </RedditShareButton> <WhatsappShareButton {/* Url you want to share */} <WhatsappIcon size={32} round /> </WhatsappShareButton> <LinkedinShareButton {/* Url you want to share */} <LinkedinIcon size={32} round /> </LinkedinShareButton> </div> ) } |
Explanation: In the above example first, we are importing different social share buttons from our next-share package and then we are using those buttons in our Text component. You can add the URL you want to share in the URL parameter of every button.
Steps to run the application: Run the below command in the terminal to run the app.
npm run dev
Output:
