如何将 Bootstrap 5 与 Next.js 一起使用? [英] How can I use Bootstrap 5 with Next.js?

问题描述

使用 npm install bootstrap 安装引导程序后，我将样式添加到 /pages/_app.js，如下所示:

import 'bootstrap/dist/css/bootstrap.css';导出默认函数 App({ Component, pageProps }) {返回 <组件 {...pageProps}/>}

但是，使用 javascript 的任何内容都无法正常工作，例如

现在，解决办法是什么?

我在我的函数组件中使用了这段代码:

 useEffect(() => {typeof 文档！== 未定义?需要('bootstrap/dist/js/bootstrap'):空}, [])

带有空 dependencies 的

useEffect 与在第二次运行代码后运行的 componentDidMount() 类似.由于代码首先在服务器运行，然后在客户端运行，因此不会产生错误，因为客户端有文档.

<块引用>

我从来没有使用过 `componentDidMount().

这对我有用吗?

我刚刚在我的其他应用中复制了您的 Collapse 示例 以验证这一点.

After installing bootstrap with npm install bootstrap I added the style to /pages/_app.js like so:

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

However anything from it that uses javascript does not work at all, e.g. the Collapse example from their 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

If I add import 'bootstrap/dist/js/bootstrap.js' to /pages/_app.js then it starts "working" as expected, until a page reload in which it says ReferenceError: document is not defined (screenshot), which leads me to believe it's not possible or that I shouldn't try to use boostrap + react or next.js.
I had thought them dropping jquery meant that it should work just "out of the box" with frameworks like react (as in not needing react-boostrap or reactstrap anymore)

Is there a way to properly use boostrap 5 and nextjs? Or should I just try something else entirely or go back to using reactstrap (which currently seems to only support boostrap 4)?

解决方案

This is a common thing that most of us miss while switching to NextJS.

Problem: Document is not defined.

Reason: NextJS renders your app at server, and there is no window, document etc. on server, hence document is not defined. you can even console.log(typeof window, typeof document) to verify this.

NOW, what is the solution?

I used this code in my function component:

    useEffect(() => {
        typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null
    }, [])

useEffect with empty dependencies works like componentDidMount() which runs after the code is run second time. Since code runs first at server and then at client, it will not produce errors, as client has document.

I've never used `componentDidMount(), ever.

Did that worked for me?

I just copied your Collapse example in my other app to verify this.

这篇关于如何将 Bootstrap 5 与 Next.js 一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！