How to add bootstrap to NextJS

Question

I've had a problem with mdbreact package, because when i am adding some components like buttons, etc. I am getting error: "Window is not defined". I made a research and found that window object is defined only on the client side. Is it possible way to add Bootstrap to NextJS???

score 0 · Answer 1 · answered Dec 26 '20 at 21:53

In case you want to use bootstrap cdn, your can simply use _app.js or _document.js files in nextjs.

Here is how i linked bootstrap cdn to my nextjs project via _document.js

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <link
                        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
                        rel="stylesheet"
                        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
                        crossorigin="anonymous"
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

To know more about _document.js click here.

You can also use _app.js in a similar way. for more information about _app.js check this out.

Clément Prévost · Accepted Answer · 2020-05-19T15:00:35.540

-3

Updated answer (2020)

react-bootstrap supports SSR as of v1.0

Source: https://github.com/react-bootstrap/react-bootstrap/issues/3569

Outdated answer (2018)

At the time of writing, there is only one "clean" way: using Dynamic Components to disable SSR for those component.

import dynamic from 'next/dynamic'
const ButtonWithNoSSR = dynamic(import('react-bootstrap/lib/Button'), {
  ssr: false
})

The "dirty" way would be to make react-bootstrap support SSR by mocking the window object.

edited May 19 '20 at 15:00

answered Sep 08 '18 at 14:43

Clément Prévost

8,000
2
36
51

It's okay but it's generate a lot of code if i have for example 7 or more imports from library – Marcin Warzybok Sep 08 '18 at 15:09
You could use regular bootstrap CSS classes with your code, or better then, have StyledJSX setup for CSS in JS – Clément Prévost Sep 08 '18 at 15:23
How about other ui frameworks like material design bootstrap for react??? – Marcin Warzybok Sep 08 '18 at 15:38
Ok, i forgot about this approach (adding css class) – Marcin Warzybok Sep 08 '18 at 15:39
A stated loud and clear that this answer was "at the time of writing" the only way. Updated the anwser. Next negative review I will be forced to delete this answer. – Clément Prévost May 19 '20 at 15:02

How to add bootstrap to NextJS

2 Answers2

Updated answer (2020)

Outdated answer (2018)