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;

Answer 2

Yes, I am using it!
You can follow egdavid's answer to configure react-bootstrap.

The 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>

Answer 3

Yes you can use it. I think the most important issue is that server-side rendering supported in combination of next js & react-bootstrap? yes in react-bootstrap docs you can see how to implement this option.

https://react-bootstrap.github.io/getting-started/server-side-rendering/

you could do it something like this:

import SSRProvider from 'react-bootstrap/SSRProvider';

   <SSRProvider>
     <App />
   </SSRProvider>

Answer 4

yes , you can use bootstrap and react-bootstrap inside next.js.

and i am use it inside my applications ,

and here is a simple example to use navbar and modal component just for testing ..

1- first install "react-bootstrap bootstrap" by using the follwing commands :

npm install react-bootstrap bootstrap

2- inside "_app.js" file import bootstrap css file on the top of file , and bootstrap js file inside useEffect , like the following :

import { useEffect } from 'react';
import Nav from '../components/nav'
import 'bootstrap/dist/css/bootstrap.css';


function MyApp({ Component, pageProps }) {
    
    useEffect(() => {
        import ('bootstrap/dist/js/bootstrap.js')
    }, []);

  return (
    <>
        <Nav />
        <Component {...pageProps} />  
    </>
 
  )
}

3- and here is the my Nav component for testing (compatible with bootstrap 5) ... :

import { useState } from "react";
import {Modal, Button} from 'react-bootstrap';

const Nav = () => {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const confirm_modal = () => {
        console.log('modal is working ...')
        setShow(false)
    }

    return(
        <>

<nav className="navbar navbar-expand-lg navbar-light bg-light">
  <div className="container-fluid">
    <a className="navbar-brand" href="#">Navbar</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav me-auto mb-2 mb-lg-0">

        <li className="nav-item">
          <a className="nav-link" onClick={handleShow} href="#"> test modal</a>
        </li>
        <li className="nav-item dropdown">
          <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a className="dropdown-item" href="#">Action</a></li>
            <li><a className="dropdown-item" href="#">Another action</a></li>
            <li><hr className="dropdown-divider" /></li>
            <li><a className="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>

      </ul>
      <form className="d-flex">
        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
        <button className="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>



      <Modal show={show} onHide={handleClose}  keyboard="false">
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Are You Sure You Want This!.</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="danger" onClick={ confirm_modal  }>
          Yes
          </Button>
        </Modal.Footer>
      </Modal>
 
        </>
    )
}

export default Nav

4- now create any page (for example index.js) and test it .

---

how to test :

1- if you see bootstrap styles showing on navbar (colors , Buttons styles ) that's means the 'boostrap css is working fine'.

2- if the dropdown menue is clickable and working , that's means bootstrap js file is working fine .

3- if the test modal works and you see the confirmation box , that's means the react-bootstrap components works fine .

this is just example and change it based on your case/requirements .

i hope this helpful for you .

Answer 5

Yup, you can use it, by providing CDN link inside your <head> tag in pages/index.js.

import Head from 'next/head';
import Badge from 'react-bootstrap/Badge';
import "../public/css/bootstrap.css";
const Index = () => (
    <Head>
      <link
        rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous"
      />
    </Head>
    <div>
        <p className='display-4'>Hello</p>
        <Badge>Heading</Badge>
    </div>
)

export default Index;

Hope it works!!!