title: How can I use Bootstrap 5 with Next.js?
body: <p>After installing bootstrap with <code>npm install bootstrap</code> I added the style to <code>/pages/_app.js</code> like so:</p>
  <pre class="lang-js prettyprint-override"><code>import 'bootstrap/dist/css/bootstrap.css';
  export default function App({ Component, pageProps }) {
      return &lt;Component {...pageProps} /&gt;
  }
  </code></pre>
  <p>However anything from it that uses javascript does not work at all, e.g. the <a href="https://getbootstrap.com/docs/5.0/components/collapse/#example" rel="noreferrer">Collapse example</a> from their docs.</p>
  <pre class="lang-js prettyprint-override"><code>function App() {
      return (
        &lt;div&gt;
          &lt;p&gt;
            &lt;a class=&quot;btn btn-primary&quot; data-bs-toggle=&quot;collapse&quot; href=&quot;#collapseExample&quot; role=&quot;button&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseExample&quot;&gt;
              Link with href
            &lt;/a&gt;
            &lt;button class=&quot;btn btn-primary&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseExample&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseExample&quot;&gt;
              Button with data-bs-target
            &lt;/button&gt;
          &lt;/p&gt;
          &lt;div class=&quot;collapse&quot; id=&quot;collapseExample&quot;&gt;
            &lt;div class=&quot;card card-body&quot;&gt;
              Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
  }
  export default App
  </code></pre>
  <p>If I add <code>import 'bootstrap/dist/js/bootstrap.js'</code> to <code>/pages/_app.js</code> then it starts &quot;working&quot; as expected, until a page reload in which it says <code>ReferenceError: document is not defined</code> <a href="https://i.imgur.com/V3IP0Qo.png" rel="noreferrer">(screenshot)</a>, which leads me to believe it's not possible or that I shouldn't try to use boostrap + react or next.js.<br />
  I had thought them dropping jquery meant that it should work just &quot;out of the box&quot; with frameworks like react (as in not needing react-boostrap or reactstrap anymore)</p>
  <p>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)?</p>