Importing bootstrap 5 modules into next.js

I'm working on a blog project. I have deployed strapi cms on heroku and sending posts to mongodb and I'm fetching the data on next.js. I'm making styling via bootstrap-5 and importing custom.scss file from _app.js file. Everything is ok for now but when i try to import js files of bootstrap-5, it throws me bunch of errors. I couldn't find a clear answer on the net. What could be the cause of the problem I'm facing ?

// import "../../node_modules/bootstrap/dist/js/bootstrap.bundle.min"
import "../../node_modules/bootstrap/dist/js/bootstrap.esm.min"
// import "../../node_modules/bootstrap/dist/js/bootstrap.esm"
// import "~bootstrap/dist/js/bootstrap.esm.min"
import "../custom.scss"

error - ReferenceError: document is not defined
    at Module../node_modules/bootstrap/dist/js/bootstrap.esm.min.js (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:195:2902)    
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at Module../src/pages/_app.jsx (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:1070:107)
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at Object.0 (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:1115:18)
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:91:18
    at Object.<anonymous> (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at requirePage (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\node_modules\next\dist\next-server\server\require.js:1:1184)
    at loadComponents (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\node_modules\next\dist\next-server\server\load-components.js:1:865)
ReferenceError: document is not defined
    at Module../node_modules/bootstrap/dist/js/bootstrap.esm.min.js (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:195:2902)    
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at Module../src/pages/_app.jsx (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:1070:107)
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at Object.0 (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:1115:18)
    at __webpack_require__ (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:23:31)
    at C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:91:18
    at Object.<anonymous> (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\.next\server\pages\_app.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at requirePage (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\node_modules\next\dist\next-server\server\require.js:1:1184)
    at loadComponents (C:\Users\Ali Alperen Arıkan\Desktop\WebDevelopment\WebDevelopment\Projelerim\next-mongo\node_modules\next\dist\next-server\server\load-components.js:1:865)