How to Use Lottie Animations in Next.js (No Errors)

Hello there👋

If you have ever tried to integrate animations from a .json file into a Next.js project using Lottie, you’ve probably run into the same roadblocks I did: barely any tutorials, solutions that break, and frustrating error messages like this: "Cannot find module 'babel-runtime/helpers/extends'" when you use the react-lottie library — which, as you might have guessed, didn’t work as expected with Next.js.

After some trial and error, like every ~~impatient~~ relentless developer, I changed libraries. I found a better way to get Lottie animations working smoothly in Next.js. In this quick guide, I’ll show you a simple alternative to react-lottie that will get your animations up and running with zero headaches. By the end of this article, all you’ll need to change is the content of your json file. Let’s dive in!

An Easier Way to Use Lottie Animations in Next.js

As much as I wanted to make react-lottie work with Next.js, it quickly became clear that I was spending more time troubleshooting errors than getting work done. After running into issues like the "babel-runtime" error (and a few other dead ends), I decided to look for a more compatible option.

That’s when I discovered lottie-react, which worked out perfectly with Next.js. Let’s walk through how to use it for seamless Lottie animations.

Create your next app

 npx create-next-app@latest my-lottie-app

Install lottie-react
```
 npm i lottie-react
```

Create your lottie animation component

 // app/components/MyLottieComponent.tsx

 "use client";

 import * as animationData from "./animationData.json";
 import { useLottie } from "lottie-react";

 const MyLottieComponent = () => {
   const defaultOptions = {
     animationData: animationData,
     loop: true,
   };

   const { View } = useLottie(defaultOptions);

   return (
     <>
       <div className="">
         <div className="w-full">{View}</div>
       </div>
     </>
   );
 };

 export default MyLottieComponent;

Import your animation component into your page

 import Image from "next/image";
 import MyLottieComponent from "./components/MyLottieComponent";

 export default function Home() {
   return (
     <main className="flex min-h-screen p-24">
       <div className="flex flex-col items-center mx-auto font-mono text-sm lg:flex">
         <p className="">Lottie Animation</p>
         <MyLottieComponent />
       </div>
     </main>
   );
 }

And that’s all, really.

https://youtu.be/BNdYcZg-QCg

Animation source: https://codepen.io/airnan/project/editor/ZeNONO

Remember to add your animation.json file which should look something like this:

Conclusion

In the end, switching to a different library turned out to be the quickest and easiest solution — and it saved me time trying to fix a dependency issue that wasn’t worth the effort. If you’re using Next.js and need to integrate Lottie animations without the pain, I hope this guide helped save you some time and frustration. Happy coding, and may your animations always be smooth!

Render lottie animations from JSON file in Next.js (No errors)

An Easier Way to Use Lottie Animations in Next.js

Conclusion