如何在 Next.js 中添加文本显示？

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

方法：要添加我们的文本显示，我们将使用 react-awesome-reveal 包。 react-awesome-reveal 包帮助我们集成不同类型的文本显示。所以首先，我们将安装 react-awesome-reveal 包，然后我们将在我们的主页上添加不同的文本。

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

npx create-next-app gfg

安装所需的包：现在我们将使用以下命令安装 react-awesome-reveal 包：

npm i react-awesome-reveal

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

添加文本显示：安装 react-awesome-reveal 包后，我们可以轻松地在应用程序的任何页面上添加不同的文本显示。在本例中，我们将向主页添加文本显示。

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

Javascript

import { Fade,Bounce,Flip } from "react-awesome-reveal";
import React from 'react'
  
export default function Reveal() {
  return (
    
      
        GeeksforGeeks - Text
      
      
        Second Text
      
      
        Third Text
      
    
  )
}

说明：在上面的例子中，我们首先从安装的包中导入不同的文本显示组件，如 Fade、Bounce 和 Flip。然后我们使用这个组件并在其中设置文本。您还可以使用 duration 属性设置每个动画的持续时间。

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

npm run dev

如何在 Next.js 中添加文本显示？

Javascript

输出：