Next.js include Bootstrap JS

Question

I am learning next.js and trying to use Bootstrap.

I created a new project with npx create-next-app@latest my-app and used the new "app" directory.

After that I installed Bootstrap with npm install bootstrap. In my "Layout.jsx" I imported the Bootstrap CSS, which worked and I can use the Bootstrap CSS without any problem. I tested it by creating an app wide nav bar in the "Layout.jsx".

Now I want to use a Bootstrap dropdown menu inside the nav bar (template from bootstrap as a test) which depends on JS from the Bootstrap.js file. The navbar and the button for the dropdown will be displayed as expected but clicking on the button does not open the dropdown menu.

So I tried to import the Bootstrap.js in the "Layout.jsx" but I will get the following message:

"Could not find a declaration file for module 'bootstrap/dist/js/bootstrap.js'. '[...]/bootstrap/dist/js/bootstrap.js' implicitly has an 'any' type."

I then found a solution that suggested to use the following code inside the pages/_app.js which from my understanding is the "layout.jsx" when using the app directory :

useEffect(() => {import("bootstrap/dist/js/bootstrap");}, []);

I copied the code inside my "Layout.jsx" but I will then recieve the error:

"You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Maybe one of these should be marked as a client entry with "use client""

Additionally I will get the same error message as if I would import it directly.

Since I am new to next.js and react I do not really know how to handle this information.

I then tried to find different solutions but most of them are based on older versions of next.js or they recommended installing more packages to solve this issue and I am not sure if that is really necessary.

Any solution or hint?

Answer 1

The approach I took was to do something like this inside your main layout or _app.jsx

    if (typeof window !== "undefined") {
      require("bootstrap/dist/js/bootstrap");
    }
  }, []); 

Answer 2

When you use bootstrap package in Next.js, everything works perfectly fine related to Bootstrap CSS.

However, the JavaScript file has issues of not working perfectly on Next.js. A solution is to use react-bootstrap package with bootstrap.

React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery.

1) Install Bootstrap and React-Bootstrap using npm, yarn, or pnpm.

npm i bootstrap react-bootstrap

2) Go to the globals.css file present inside app directory. At the top of file add the following code :

@import "~bootstrap/dist/css/bootstrap.min.css";

OR

Go to the layout.tsx file present inside app directory. At the top of file add the following code :

import "bootstrap/dist/css/bootstrap.min.css";

3) You can add the bootstrap styling to elements using className .

To use bootstrap components like Container, Button, Form etc, you can import them from react-bootstrap and use them like normal components.

Eg :

import { Button, Col, Container, Row } from "react-bootstrap";

export default function Home() {
  return (
    <Container>
      <Row>
        <Col>
          <h1 className="text-danger fw-bold">Home</h1>
          <Button variant="primary" className="mt-5 ">Click Me</Button>
        </Col>
      </Row>
    </Container>
  );
}

That's it you are all set to use bootstrap in your Next.js application.