Can I Use React Bootstrap With Next.js?

Answer :

It is obviously possible to use react-bootstrap in a nextjs application.

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

Nextjs allows you to display SSG/SSR pages, javascript-disabled users will see your app but the layout will 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; 

Yes, I am using it!
Only issue I found is that links are not working properly in terms of SPA.
For that, I found the below solution. You have to wrap NavBar.Link within Link and use passHref attribute if you want to visible hyperlink on the link.

<Link href="/" passHref>     <Nav.Link>Home</Nav.Link> </Link> <Link href="/contact" passHref>     <Nav.Link>Contact</Nav.Link> </Link>