Using Sass and Managing Scripts in Next.js – Modern Styling and Optimized Loading

Installing and Using Sass in Next.js

To enable Sass support, install the following package:

npm install --save-dev sass

Next.js supports two syntaxes:

• .scss: CSS-like syntax (recommended)
• .sass: Indented syntax

Using CSS Modules with Sass

For component-level styling, use .module.scss or .module.sass files.

Configuring sassOptions in next.config.js

sassOptions: {
  additionalData: `$var: red;`,
  implementation: 'sass-embedded',
}

Using Sass Variables in JavaScript

Example:

// variables.module.scss
$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// page.tsx
import variables from './variables.module.scss'

<h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>

Loading Scripts with the Script Component

To load a script in a specific layout:

import Script from 'next/script'

<Script src="https://example.com/script.js" />

To load a script globally:

// app/layout.tsx
<Script src="https://example.com/script.js" />

Script Loading Strategies

• beforeInteractive: Before Next.js loads
• afterInteractive: After hydration (default)
• lazyOnload: During browser idle time
• worker: Load in Web Worker (experimental)

Using Partytown for Web Worker Offloading

Enable in next.config.js:

experimental: {
  nextScriptWorkers: true,
}

Then install:

npm install @builder.io/partytown

And use:

<Script src="https://example.com/script.js" strategy="worker" />

Inline Scripts

Example:

<Script id="show-banner">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

Using Event Handlers

In a client component:

'use client'

<Script
  src="https://example.com/script.js"
  onLoad={() => console.log('Script loaded')}
/>

Passing Additional Attributes

Attributes like nonce or data-* are forwarded automatically:

<Script
  src="https://example.com/script.js"
  id="example-script"
  nonce="XUENAJFW"
  data-test="script"
/>

Conclusion

With Sass and the Script component in Next.js, you can implement modern styling and optimized script loading. These tools give you full control over performance, security, and user experience.