如何在 Next.js 中使用Bootstrap 5？

Question

问题描述

用npm install bootstrap安装完 bootstrap 后，添加 style 到 /pages/_app.js。

import 'bootstrap/dist/css/bootstrap.css';
export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />
}

但不能运行，官方文档：https://getbootstrap.com/docs...

function App() {
    return (
      <div><p><a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
          </a><button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
          </button></p><div class="collapse" id="collapseExample"><div class="card card-body">
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
          </div></div></div>
    );
}
export default App

如果我在/pages/_app.js中加入import 'bootstrap/dist/js/bootstrap.js'，它可以像预期的那样开始工作，当页面重新加载时出现ReferenceError：document is not defined

求助：有什么方法可以在nextjs 中正确使用 bootstrap 5