Can I use React Bootstrap with Next.js?

Question

Does anyone know if you can use react-bootstrap with Next.js? I am using the latest versions of both, I can provide code at this point, but right now my app is not throwing any errors, it is just not registering any of my react-bootstrap components. Maybe there is some trick that I have not been able to find on the internet? I can provide code or file structure if that helps. Thanks in advance!

next.config.js

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
    /* my next config */
})

pages/index.js

import Badge from 'react-bootstrap/Badge';
import "../public/css/bootstrap.css";
const Index = () => (
    <div>
        <p className='display-4'>Hello</p>
        <Badge>Heading</Badge>
    </div>
)

export default Index;

package.json

{
  "name": "vacation-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "next": "^9.1.1",
    "react": "^16.10.2",
    "react-bootstrap": "^1.0.0-beta.14",
    "react-dom": "^16.10.2"
  }
}

Answer 1

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;