What is the best way to integrate Bootstrap 5 with Next.js?

Question

What is the best way to integrate Bootstrap 5 with Next.js?

After adding Bootstrap to my project with npm install bootstrap, I included the style in /pages/_app.js like this:

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

However, any JavaScript functionality, such as the Collapse example from the Bootstrap docs, does not work at all.

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 include

import 'bootstrap/dist/js/bootstrap.js'

in /pages/_app.js, it starts working as expected. However, upon page reload, I encounter a

ReferenceError: document is not defined

error (screenshot). This makes me question whether using Bootstrap with React or Next.js is feasible or advisable.
I assumed that with jQuery being dropped, Bootstrap 5 should be compatible out of the box with frameworks like React (eliminating the need for react-bootstrap or reactstrap).

Is there a proper way to implement Bootstrap 5 with Next.js? Or should I consider alternative solutions or revert to using reactstrap (which currently only supports Bootstrap 4)?

javascript node.js reactjs next.js bootstrap-5

Answer 1

Answer №1

When transitioning to NextJS, there is a common oversight that many of us tend to make.

Issue: ReferenceError: Document is not defined.

Cause: NextJS executes the application on the server side where there is no global window or document object available. This results in the document variable being undefined. You can easily test this by printing out the types of window and document using

console.log(typeof window, typeof document)

.

https://i.stack.imgur.com/yFraH.png

So, what's the solution?

I found a workaround by adding the following code snippet to my function component:

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

The use of useEffect with an empty dependency array mimics the behavior of componentDidMount(), ensuring that the code runs after the initial server-side rendering and then client-side execution. This prevents any errors from occurring as the client has access to the document object.

I have completely moved away from using `componentDidMount()` nowadays.

Was this approach successful for me?

To validate this, I replicated your Collapse example in another application.

https://i.stack.imgur.com/Cu077.png

Answer 2

When transitioning to NextJS, there is a common oversight that many of us tend to make.

Issue: ReferenceError: Document is not defined.

Cause: NextJS executes the application on the server side where there is no global window or document object available. This results in the document variable being undefined. You can easily test this by printing out the types of window and document using

console.log(typeof window, typeof document)

.

https://i.stack.imgur.com/yFraH.png

So, what's the solution?

I found a workaround by adding the following code snippet to my function component:

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

The use of useEffect with an empty dependency array mimics the behavior of componentDidMount(), ensuring that the code runs after the initial server-side rendering and then client-side execution. This prevents any errors from occurring as the client has access to the document object.

I have completely moved away from using `componentDidMount()` nowadays.

Was this approach successful for me?

To validate this, I replicated your Collapse example in another application.

https://i.stack.imgur.com/Cu077.png

Answer 3

Answer №2

Instructions:

First, use npm to install bootstrap.
Next, include the bootstrap library in the _app.js file.

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} />
    </>
  );
}

Answer 4

Instructions:

First, use npm to install bootstrap.
Next, include the bootstrap library in the _app.js file.

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} />
    </>
  );
}

Answer 5

Answer №3

It seems that React Bootstrap has now incorporated support for Bootstrap5 as of July 2021: Check out the image from their website below:

https://i.stack.imgur.com/ceRR7.png

Answer 6

It seems that React Bootstrap has now incorporated support for Bootstrap5 as of July 2021: Check out the image from their website below:

https://i.stack.imgur.com/ceRR7.png

Answer 7

Answer №4

There is a distinction between the _app.js and _app.tsx files

function MyApp({ Component, pageProps }: AppProps) {
  // load 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 also utilize CDN in the _document file!

Answer 8

There is a distinction between the _app.js and _app.tsx files

function MyApp({ Component, pageProps }: AppProps) {
  // load 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 also utilize CDN in the _document file!

Answer 9

Answer №5

Indeed, using a CDN link for Bootstrap is a simple way to integrate it into your project.

Syntax:

export default function Document() {
  return (
    <Html>
      <Head>
        
<!-- Include Bootstrap via CDN -->
<link
          href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcded3d3c8cfc8ceddccfc89928c928c91ded9c8dd8d">[email protected]</a>/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
          crossOrigin="anonymous"
        />




      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Check out the project I'm currently developing:

https://i.stack.imgur.com/ySBqO.png

Here's the output of the project (Bootstrap button):

https://i.stack.imgur.com/E4TYS.png

Answer 10

Indeed, using a CDN link for Bootstrap is a simple way to integrate it into your project.

Syntax:

export default function Document() {
  return (
    <Html>
      <Head>
        
<!-- Include Bootstrap via CDN -->
<link
          href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcded3d3c8cfc8ceddccfc89928c928c91ded9c8dd8d">[email protected]</a>/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
          crossOrigin="anonymous"
        />




      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Check out the project I'm currently developing:

https://i.stack.imgur.com/ySBqO.png

Here's the output of the project (Bootstrap button):

https://i.stack.imgur.com/E4TYS.png

Answer 11

Answer №6

When importing bootstrap.css, don't forget to also import the bootstrap.js file in order to use collapse functionality. Bootstrap's js requires jquery and popper, although react or nextjs advise against using jquery.

Instead, consider using one of the following alternative libraries:

react-bootstrap
reactstrap

For the latest version of bootstrap 5, you can utilize BootstrapCDN:

In _document.js, add the following 2 lines:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaca1a1babdbabcafbe8efbe0fee0ff">[email protected]</a>/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16747979626562647766562338263827">[email protected]</a>/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>

Answer 12

When importing bootstrap.css, don't forget to also import the bootstrap.js file in order to use collapse functionality. Bootstrap's js requires jquery and popper, although react or nextjs advise against using jquery.

Instead, consider using one of the following alternative libraries:

react-bootstrap
reactstrap

For the latest version of bootstrap 5, you can utilize BootstrapCDN:

In _document.js, add the following 2 lines:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaca1a1babdbabcafbe8efbe0fee0ff">[email protected]</a>/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16747979626562647766562338263827">[email protected]</a>/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>

What is the best way to integrate Bootstrap 5 with Next.js?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Indeed, using a CDN link for Bootstrap is a simple way to integrate it into your project.

Answer №6

Similar questions

How to properly align TableHeader and TableBody contents in a Material-UI table

Challenges with dynamically adding rows using jQuery

Sending JSON Data from C# to External JavaScript File without Using a Web Server

LESS — transforming data URIs with a painting mixin

What is the reason for having both the Video.js npm module and the <script> tag in place?

Is there a way to efficiently display more than 10 data items at a time using the FlatList component in react-native?

execute a post request with dynamic data to API using nextjs httpService

Building mobile apps with React Native involves passing functions through props

What steps can I take to get Node.js up and running smoothly once more?

React not showing multiple polylines on the screen

The call to the hook is invalid. In order to use hooks, they must be called within the body of a function component in

Unveiling the Power of KnockoutJS: Displaying HTML Content and Populating

The text displayed using react-pdf appears in various locations on the page

Export Webdatarock as HTML directly in React without triggering a download

Is Angular Translate susceptible to race conditions when using static files for multi-language support?

Retrieve all records that contain a specific field using Mongoose

Clicking on the anchor at the bottom of the page will smoothly navigate you to the top of the page

Mongoose encountered a TypeError due to the undefined value of t.versions.node

Allowing users to easily copy and paste within expansion panels

Can HTML/CSS be used to specifically target handheld mobile devices?