I want to use bootstrap class and next.js modules together inline

First, rename your .header-top to .headerTop in header.module.scss.

Then, include your class name:

<div className={`${styles.headerTop} container d-flex ...`}>

Explanation: class names in CSS modules are automatically processed to make them unique to ensure scoping. For example, .headerTop will become something like .header_headerTop__JnCx9 (.fileName_className_randomString). Therefore, in components you need to include your class names as JavaScript expressions rather than strings. Namely, if you would have one class name, you would do: <div className={styles.headerTop}></div>. But in your case you want to include your own class name with bootstrap classes (which are not CSS modules). One way of doing it is using Template literals which allow to include expressions within strings.

You need to first install bootstrap.

npm install --save bootstrap

You can only import css in one location in NextJS.

create pages/_app.js and import the css file.

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

in pages/_app.js

Head Tag and insert ALL bootstrap into it:

  <Head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></link>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
  </Head>

Then in any component, once you have imported your Name.module.css, e.g.:

import styles from '../styles/Navbar.module.css';

Now you can combine self-made CSS classes with Bootstrap classes like this:

<div className={`${styles.redBorder} bg-dark`}></div>

NOTE: you CAN NOT use dashes for class names, so this will NOT work:

.red-border;

this will NOT apply in next.js

instead use CamelCase.

.redBorder;

then it works.