I used to write like this:

componynts / nav.jsx
Components / NAV.SCSS.

nav.jsx

import './nav.scss';
const nav = () = & gt; {
  Return (
   & lt; nav & gt;
     & lt; a href = "#" & gt; Test & lt; / a & gt;
   & lt; / nav & gt;
  );
}

and next.js I knock out a mistake that you need to use modularity.
Error:

./ components / nav.css
Global CSS Cannot Be Imported From Files Other Than Your Custom & LT; App & GT;. Please Move All Global Css Imports to Pages \ _app.js. Or Convert the Import to Component-Level CSS (CSS Modules).

But I adhere to the Flux architecture, and I my way is more familiar and more convenient. Is it not yet?
Dependency

next, react, react-dom, sass

Answer 1

So Try:

Rename ./ nav.scss – & gt; ./ nav.module.scss

import styles from './nav.Module.scss'
const nav = () = & gt; {
  Return (
   & lt; nav & gt;
     & lt; a href = "#" classname = {styles.error} & gt; Test & lt; / a & gt;
   & lt; / nav & gt;
  );
}

nav.module.scss: (example)

. error {
 Color: Red;
}