ort Lottie from "lottie-react";
import successAnim from "@/public/animations/success.json";
export default function LottieAnimation() {
return (
<Lottie
animationData={successAnim}
loop={true}
style={{ width: 200, height: 200 }}
/>
);
}
Enter fullscreen mode Exit fullscreen mode
Then use it in any Server Component or page:
import LottieAnimation from "@/components/LottieAnimation";
export default function HomePage() {
return (
<main>
<h1>Welcome</h1>
<LottieAnimation />
</main>
);
}
Enter fullscreen mode Exit fullscreen mode
## [](#alternative-dynamic-import-zero-ssr-bundle)Alternative: Dynamic Import (Zero SSR Bundle)
If you want to keep the animation completely out of the server bundle, use `next/dynamic` with `ssr: false`:
import dynamic from "next/dynamic";
const LottieAnimation = dynamic(
() => import("@/components/LottieAnimation"),
{ ssr: false, loading: () => <div style={{ width: 200, height: 200 }} /> }
);
export default function HomePage() {
return <LottieAnimation />;
}
Enter fullscreen mode Exit fullscreen mode
This is the cleanest approach — the Lottie runtime only loads in the browser, keeping your server response fast.
## [](#loading-from-a-url-instead-of-importing-json)Loading from a URL (Instead of Importing JSON)
For large files or dynamic animations fetched from an API, pass a URL via the `path` prop using lottie-web directly:
"use client";
import { useEffect, useRef } from "react";
import lottie from "lottie-web";
export default function RemoteLottie({ src }: { src: string }) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!ref.current) return;
const anim = lottie.loadAnimation({
container: ref.current,
renderer: "svg",
loop: true,
autoplay: true,
path: src,
});
return () => anim.destroy();
}, [src]);
return <div ref={ref} style={{ width: 200, height: 200 }} />;
}
Enter fullscreen mode Exit fullscreen mode
## [](#pages-router)Pages Router
If you're on the Pages Router, the `"use client"` directive is not needed — just use dynamic import with `ssr: false` and you're set.
## [](#finding-free-animations)Finding Free Animations
**[IconKing](https://iconking.net/)** lets you preview, edit colors, and download free Lottie animations in both .json and .lottie formats — no account needed. It's the fastest way to go from "I need a loading spinner" to a production-ready asset.
