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