Install and Setup Bootstrap in Next.js

In a freshly created Next.js app, install Bootstrap npm i bootstrap. Over in layout.js, import the bootstrap.css file, import 'bootstrap/dist/css/bootstrap.min.css'; and comment out globals.css.

I've replaced Next.js' boilerplate with a Navbar from Bootstrap's website. This Navbar has a couple of tags that aren't closed. Once you do that, it will work perfectly.

On the dev server, our styles are there but the hamburger menu doesn't work until we import Bootstrap's JS file. in components/BootstrapClient.js, create a client component using "use client", import { useEffect } from 'react', and create the BootstrapClient component. Inside that component, add the Bootstrap import inside of the useEffect.

AN IMPORTANT NOTE: If you’re using the pages directory, you don’t have to use a Client Component. You can add in the useEffect right above the return statement and import the bootstrap file there.

Now, it should all be working!