How to Add React-Bootstrap to NextJS

I this tutorial you'll learn how to add react-bootstrap to NextJS and start using its components.

What is React Bootstrap?

React Bootstrap rebuilds Bootstrap — the most popular frontend framework for React, removing the unnecessary jQuery dependency. As one of the oldest React frameworks, React Bootstrap has evolved and matured linearly with React. Additionally, each component is implemented with accessibility in mind, so it offers a set of accessible-by-default design elements.

Why React Bootstrap?

React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. If you have React setup and React-Bootstrap installed, you have everything you need. Methods and events using jQuery is done imperatively by directly manipulating the DOM. In contrast, React uses updates to the state to update the virtual DOM. In this way, React-Bootstrap provides a more reliable solution by incorporating Bootstrap functionality into React's virtual DOM. Below are a few examples of how React-Bootstrap components differ from Bootstrap.

Install and Setup

To use react-bootstrap with NextJS, first we install the react-bootstrap and bootstrap packages.

npm install react-bootstrap bootstrap

We'll only use the scss files from bootstrap for the styling.

Next, in src/app/globals.css, let's import bootstrap.min.css.

Now, we can use the bootstrap components in our project. 

RSC Gotcha

With the introduction of Next 13+ and the increase in popularity of RSC an important caveat of using React-Bootstrap is the `use-client` wrapper needed for a lot of components. A lot of the codebase for React-Bootstrap depends on user context or state thus making them incompatible for RSC. However, components are still SSR'd and produce HTML that is sent to the client, thus React-Bootstrap components are all SSR compatible. The best solution seems to wrap components as close to the leafs in `use-client` . Interesting discussion on the topic in this GitHub issue .