Next.js CSS Styling: Combining Global & Module Styles

When optimizing your NextJS website for search engines, seamlessly integrating global and module CSS styles is essential. Here's how to achieve it without relying on additional packages.

Begin by incorporating global styles into your pages/app.js:

import 'styles.css';

Next, within your component, import module-specific styles:

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

To combine global and module styles for a specific element, follow either of these two approaches:

• Utilize template literals to concatenate class names:

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

• Merge class names using the Array.join() method:

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