🎨 Global CSS Support in Next.js

Next.js provides built-in support for Global CSS, allowing you to style your entire application efficiently.

📌 1. Using Global CSS in Next.js

In Next.js, global styles must be imported inside _app.js or _app.tsx.

🔹 Steps to Add Global CSS

1️⃣ Create a global CSS file in the styles folder:
📂 styles/globals.css

css
<Component {import styles from "@/styles/Home.module.css";export default function Home() {  return <div className={styles.container}>Welcome to Next.js!</div>;}

✅ Scoped styles (no conflicts with other components)

📌 3. Using SCSS/SASS for Global Styles

Next.js natively supports SCSS/SASS.

1️⃣ Install SASS:

bash
npm install sass

2️⃣ Create a global SCSS file:
📂 styles/globals.scss

scss
$primary-color: #0070f3;body {  background-color: $primary-color;  color: white;}

3️⃣ Import it in _app.js

javascript
import "@/styles/globals.scss";

✅ Supports variables, mixins, and nesting

📌 4. Best Practices for Global CSS

✔️ Use global styles only for layouts, resets, and typography
✔️ Use CSS Modules for component-specific styles
✔️ Use SCSS/SASS for better styling organization