Can I use React Bootstrap with Next.js?

Yes, it is possible to use react-bootstrap in a nextjs application.

One of the problems you might encounter will be in the rendering of your application if javascript is disabled in the user’s browser and you use react-bootstrap components to build your layout (see example below).

Nextjs allows you to display SSG/SSR pages, users without javascript can see your application but the layout might be messy.

But if you still want to go with it:

npm i react-bootstrap bootstrap

Import bootstrap styles in your _app.js:

import 'bootstrap/dist/css/bootstrap.min.css';

You can then use your react-bootstrap components as you would do in reactjs:

import {Container, Row, Col} from 'react-bootstrap';
        
const Layout = () => (
  <>
    <Container fluid>
      <Row>
        <Col>
          <p>Yay, it's fluid!</p>
        </Col>
      </Row>
    </Container>
  </>
);
        
export default Layout;

Leave a Comment