如何在 NextJS 中添加社交分享按钮？

在本文中，我们将学习如何在 NextJs 中添加社交分享按钮。使用社交分享按钮，用户可以在不同的社交媒体网站上分享您的内容。

NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法：要添加我们的社交分享按钮，我们将使用下一个分享包。 next-share 包可帮助我们集成 19 个社交媒体网站，用户只需单击即可在其中分享您的内容。因此，首先，我们将安装 next-share 包，然后我们将使用 next-share 包在我们的主页上添加不同的社交分享按钮。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

安装所需的包：现在我们将使用以下命令安装下一个共享包：

npm i next-share

项目结构：它看起来像这样。

添加社交分享按钮：安装下一个分享包后，我们可以轻松地在应用程序的任何页面上添加不同的社交分享按钮。在本例中，我们将向主页添加社交分享按钮。

在index.js文件中添加以下内容：

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 (
    

      
Social Share - GeeksforGeeks
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
    
  )
}

说明：在上面的示例中，我们首先从 next-share 包中导入不同的社交分享按钮，然后我们在 Text 组件中使用这些按钮。您可以在每个按钮的 URL 参数中添加要共享的 URL。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm run dev

输出：