classnames

//Menu.jsx
import { menu item } from './Menu.css' // rule to ADD the separators
import cn from 'classnames'
...

const Menu = ({ classes = {} }) => (
  <div className={menu}>
    <button className={cn(item, classes.item)}>HOME</button>
    <button className={cn(item, classes.item)}>STORE</button>
    <button className={cn(item, classes.item)}>CONTACT</button>
  </div>
)

export default Menu

https://liefery-it-legacy.github.io/blog/2018/06/27/overriding-styles-with-CSS-modules.html

<script
    dangerouslySetInnerHTML={{
        __html: themeInitializerScript,
    }}
></script>

// ...

// This function needs to be a String
const themeInitializerScript = `(function() {
	${setInitialTheme.toString()}
	setInitialTheme();
})()
`;

function setInitialTheme() {...}

// <https://github.com/ishan-is-me/nextjs-darkmode/blob/main/pages/_document.js>

from: https://blog.logrocket.com/how-to-build-a-progress-bar-indicator-in-next-js/#what-are-nextjs-router-events

Router.events.on("routeChangeStart", (url)=>{
	console.log(“route is changing”)
})

Here is a list of some supported Next.js Router events:

• routeChangeStart: fires when a route starts to change
• routeChangeComplete: fires when a route change is completed
• routeChangeError: fires when an error occurs while changing routes, or when a route load is canceled
• beforeHistoryChange: fires before changing the Router’s route history

Visit the Next.js documentation to learn more about these Router events.