Search code examples
reactjsnext.jsserver-side-renderingmdbreact

How to add bootstrap to NextJS

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

Solution

  • 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.