How to add Lottiefile to your Next JS Website

Step 1: Install the react-lottie package The first thing you need to do is install the react-lottie package. Open your terminal and run the following command:

                    npm i react-lottie

Step 2: Add Lottie Animation to Your Component Once you have successfully installed Lottie. it's time to add the animation to your React component. To do this, navigate to the Component folder in your project.

In this folder, you'll need to paste the Lottie animation file (which typically has a .json extension). Make sure you've obtained the desired Lottie animation file beforehand, or you can find many free and exciting animations online.

Next, open the React component where you want to add the animation. Simply add the <AnimationPage /> component, or if you prefer to use a different HTML element, you can use your desired className attribute.

That's it! You've successfully integrated the Lottie animation into your React app. When you run your application, you'll be greeted with a stunning animation that enhances the user experience and adds a touch of interactivity to your project.

import React, { Component } from 'react';

import Lottie from 'react-lottie';

import animationData from 'your lottie svg file location'

class AnimationPage extends Component {

render() {

const defaultOptions = {

loop: true,

autoplay: true,

animationData: animationData,

renderer: 'svg'

}

return (

<div

<Lottie

options={defaultOptions}

height={500}

width={700}

/>

</div>

)

};

}

export default AnimationPage;