📜  如何在 Next.js 中添加推荐?

📅  最后修改于: 2022-05-13 01:56:36.063000             🧑  作者: Mango

如何在 Next.js 中添加推荐?

在本文中,我们将学习如何在 NextJs 中添加推荐信。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法:要添加我们的推荐信,我们将使用 react-testimonial 包。 react-testimonial 包帮助我们在应用程序的任何地方添加推荐。所以首先,我们将安装 react-testimonial 包,然后我们将在我们的主页上添加推荐。

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

npx create-next-app gfg

安装所需的包:现在我们将使用以下命令安装 react-testimonial 包:

npm i react-testimonial

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

添加推荐:安装 react-testimonial 包后,我们可以很容易地在我们的应用程序中添加推荐。对于这个例子,我们将把推荐添加到我们的主页。

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

Javascript
import Testimonial from 'react-testimonial';
import React from 'react'
  
export default function index() {
  return (
    
      

GeeksforGeeks - Testimonial

                 
              
                                     GeeksforGeeks Text 1                                      

GfG1

              
          
          
              
                                     GeeksforGeeks Text 2                                      

GfG2

              
          
      
    
  ) }


说明:在上面的示例中,我们首先从已安装的包中导入 Testimonial 组件。之后,我们在 Testimonials 组件中添加我们的推荐信和作者姓名。

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

npm run dev

输出:

推荐图片