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;