Next.js: How do I use bootstrap in Next.js?

Created on 21 Feb 2020 · 8Comments · Source: vercel/next.js

Bug report

Describe the bug

I have some designs in html which uses bootstrap and I try to make them dynamic using nextjs.
When I convert html to tsx (basically renaming class attributes to className) there doesnt seem to be any problem untill I add bootstrap which requires jquery. I also include jquery but bootstrap cannot find jquery in nextjs context for some reason.

To Reproduce

import jquery
import bootstrap.min.css
import bootsrap
internal server error

Expected behavior

Things to run

Screenshots

System information

OS: [e.g. macOS, Windows] Pop_OS 19
Browser (if applies) [e.g. chrome, safari] firefox
Version of Next.js: [e.g. 6.0.2] 9.2.2

Source

NikosEfthias

Most helpful comment

You should never use jquery and bootstrap's JavaScript in a React application. This is true for all React apps—not only Next.js.

Using a library like React Bootstrap gives you minimal bundle size and full React support.

Mixing Bootstrap JS (+ jQuery) will always result in application bugs because you're mutating elements that React controls.

If you must use Bootstrap's JS and jQuery, note that these are client-side only libraries and must be loaded as so:

import "bootstrap/dist/css/bootstrap.css";
import { useEffect } from "react";

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import("jquery").then($ => {
      // jQuery must be installed to the `window`:
      window.$ = window.jQuery = $;
      return import("bootstrap");
    });
  }, []);

  return <Component {...pageProps} />;
}

I highly advise you do not use this in your application. Use React Bootstrap instead!

Timer on 21 Feb 2020

👍10 👎5

All 8 comments

Hello! Questions are reserved for our Spectrum community: https://spectrum.chat/next-js.

Please repost this there!

Timer on 21 Feb 2020

this is a bug not a question @Timer . I already asked it on the spectrum but apparently there's no solution or workaround. People only suggested leaving bootstrap and using som other libraries such as reactstrap.

NikosEfthias on 21 Feb 2020

👎2 😕1

Is bootstrap simply not supported by nextjs?

NikosEfthias on 21 Feb 2020

👎1

You should never use jquery and bootstrap's JavaScript in a React application. This is true for all React apps—not only Next.js.

Using a library like React Bootstrap gives you minimal bundle size and full React support.

Mixing Bootstrap JS (+ jQuery) will always result in application bugs because you're mutating elements that React controls.

If you must use Bootstrap's JS and jQuery, note that these are client-side only libraries and must be loaded as so:

import "bootstrap/dist/css/bootstrap.css";
import { useEffect } from "react";

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import("jquery").then($ => {
      // jQuery must be installed to the `window`:
      window.$ = window.jQuery = $;
      return import("bootstrap");
    });
  }, []);

  return <Component {...pageProps} />;
}

I highly advise you do not use this in your application. Use React Bootstrap instead!

Timer on 21 Feb 2020

👍10 👎5

thanks

NikosEfthias on 21 Feb 2020

Feel free to share this answer on the question you posted!

Timer on 21 Feb 2020

@Timer the very documentation tells you to import bootstrap css from the node_modules folder.

gravitymedianet on 27 Jul 2020

Install bootstrap with a package manager npm install bootstrap or yarn add bootstrap
Import it inside your _app.js
import 'bootstrap/dist/css/bootstrap.min.css'

This worked for me.