To use global SCSS variables in a Next.js project, you can follow these steps:

1. Create a new file called _variables.scss in your project's styles directory. This file will hold your global SCSS variables.

2. Define your SCSS variables in the _variables.scss file. For example, you can define a primary color variable like this:

scss $primary-color: #ff0000;

1. Import the _variables.scss file in your styles/global.scss file. This will make the variables available globally in your project.

scss @import 'variables';

1. Import the global.scss file in your Next.js configuration file, usually _app.js or _app.tsx, located in the pages directory.

```jsx import '../styles/global.scss';

function MyApp({ Component, pageProps }) { // Your code here }

export default MyApp; ```

1. You can now use the global SCSS variables in your components by importing the styles/global.scss file.

```jsx import styles from '../styles/global.scss';

function MyComponent() { return (

); }

export default MyComponent; ```

1. Finally, you can use the global SCSS variables in your SCSS files by referencing them with the $ symbol. For example:

scss .container { background-color: $primary-color; }

This is the step-by-step process to use global SCSS variables in a Next.js project. By following these steps, you can define and use global SCSS variables throughout your project, making it easier to manage and update your styles.