How to add Testimonials in Next.js ?

In this article, we are going to learn how we can add the Testimonials in NextJs. 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 Testimonials we are going to use the react-testimonial package. The react-testimonial package helps us to add the testimonials anywhere in our app. So first, we will install the react-testimonial package and then we will add the testimonial on our homepage.

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 react-testimonial package using the below command:

npm i react-testimonial

Project Structure: It will look like this.

Adding the Testimonials: We can easily add the testimonials in our app after installing the react-testimonial package. For this example, we are going to add the testimonial to our homepage.

Add the below content in the index.js file:

Javascript

import Testimonial from 'react-testimonial';
import React from 'react'

export default function index() {
  return (
    <div>
      <h3>GeeksforGeeks - Testimonial</h3>
      <Testimonial>
          <div>
              <div style={{width:'60%',
                           border:'2px solid black',
                           marginLeft:'30px'}}>
                  <span>
                  GeeksforGeeks Text 1
                  </span>
                  <p>GfG1</p>
              </div>
          </div>
          <div style={{width:'60%',
                       border:'2px solid black',
                       marginLeft:'30px'}}>
              <div>
                  <span>
                  GeeksforGeeks Text 2
                  </span>
                  <p>GfG2</p>
              </div>
          </div>
      </Testimonial>
    </div>
  )
}

Explanation: In the above example first, we are importing the Testimonial component from the installed package. After that, we are adding our testimonials and author name inside our Testimonials component.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output: