Combining CSS styles from global and module in NextJS

There is a couple of ways to do this, these are just 2 without the need to install any package.

Let's start with the simple setup, in your pages/app.js you import your global styles

import "styles.css";

and in your component you add your styles with

import styles from "./something.module.css"

Now if we imagine you want to add class "left" from your globals and "right" from your module it would go like this:

<div className={`left ${styles.right}`}></div>

The other way I found intuitive is:

<div className={["left", styles.right].join(" ")}></div>