'How can I use Bootstrap 5 with Next.js?

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)?

Solution 1:^[1]

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.

Solution 2:^[2]

Steps: 1- Install bootstrap through npm. 2- now add bootstrap in _app.js.

import Head from 'next/head';
import Script from 'next/script';
import React, { useEffect } from 'react';
import '../styles/global.scss';
import 'bootstrap/dist/css/bootstrap.css';

export default function App({ Component, pageProps }) {
  useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
  }, []);
  useEffect(() => {
    import("jquery/dist/jquery.min.js");
  }, []);

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

  return (
    <>
      <Head>
        <meta name='viewport' content='width=device-width, initial-scale=1' />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

Solution 3:^[3]

I believe React Bootstrap (beta as of July 2021) now supports Bootstrap5: https://react-bootstrap.github.io/ See image from their website:

Solution 4:^[4]

the _app.js and _app.tsx are difference

function MyApp({ Component, pageProps }: AppProps) {
  // import bootstrap-js-libs below for _app.js
  useEffect(() => {
     import("bootstrap/dist/js/bootstrap");
   }, []);

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

We can use CDN on _document file too!

Solution 5:^[5]

You only imported bootstrap.css, you must import bootstrap's js file if you want to use collapse. And bootstrap's js require jquery and popper. However, react or nextjs doesn't recommend you to use jquery.

You can use one of 2 below libs alternative:

For latest bootstrap 5, you can use BootstrapCDN:

In _document.js, add 2 lines:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ashutosh kumar
Solution 2	Tabish Zaman
Solution 3
Solution 4	Cloud Gem
Solution 5

'How can I use Bootstrap 5 with Next.js?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]