When trying to build my nextjs project using npm run build, I run into this error:

Collecting page data …ReferenceError: document is not defined
at createTag (/Users/dayemsaeed/Downloads/seher-landing-page/node_modules/lottie-web/build/player/lottie.js:30:5)
at /Users/dayemsaeed/Downloads/seher-landing-page/node_modules/lottie-web/build/player/lottie.js:1316:20
at /Users/dayemsaeed/Downloads/seher-landing-page/node_modules/lottie-web/build/player/lottie.js:1323:6
at /Users/dayemsaeed/Downloads/seher-landing-page/node_modules/lottie-web/build/player/lottie.js:1540:4
at /Users/dayemsaeed/Downloads/seher-landing-page/node_modules/lottie-web/build/player/lottie.js:2:83
at Object. (/Users/dayemsaeed/Downloads/seher-landing-page/node_modules/lottie-web/build/player/lottie.js:5:3)
at Module._compile (node:internal/modules/cjs/loader:1368:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
at Module.load (node:internal/modules/cjs/loader:1205:32)
at Module._load (node:internal/modules/cjs/loader:1021:12)

Build error occurred
Error: Failed to collect page data for /
at /Users/dayemsaeed/Downloads/seher-landing-page/node_modules/next/dist/build/utils.js:1268:15 {
type: ‘Error’
}

This is how I’m using the Lottie animation:

import Lottie from "lottie-react";
import catAnimation from "../../../../../public/lotties/cat-animation.json";
return (
    <div className="sm:w-[500px] aspect-square">
         <Lottie animationData={catAnimation} loop={true} />
    </div>
);