Next JS 14 Styles Take 1s to Load When Using SCSS: Unraveling the Mystery

Are you tired of waiting for what feels like an eternity for your Next JS 14 styles to load when using SCSS? You’re not alone! Many developers have faced this frustrating issue, and today, we’ll dive into the reasons behind this delay and provide you with actionable solutions to get your styles loading in no time.

The Culprit: SCSS Compilation

Before we dive into the solutions, let’s understand what’s causing the delay. When using SCSS with Next JS 14, the compilation process is the primary culprit. By default, Next JS compiles your SCSS files during runtime, which leads to a substantial delay in loading your styles.

The Compilation Process

Here’s a step-by-step breakdown of the compilation process:

1. The browser requests the CSS file.
2. Next JS receives the request and compiles the SCSS file into CSS.
3. The compiled CSS is then served to the browser.

This process can take up to 1 second or more, depending on the complexity of your SCSS files and the server’s processing power.

Solution 1: Pre-Compilation with Webpack

One way to speed up the process is to pre-compile your SCSS files using Webpack. By doing so, you can reduce the compilation time to near-instant.

Step-by-Step Instructions

To pre-compile your SCSS files with Webpack, follow these steps:

1. Install the necessary dependencies:

yarn add -D sass-loader css-loader style-loader

2. Create a new file called next.config.js in the root of your project:

module.exports = {
  // Enable Webpack's CSS pre-processing
  webpack: (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
      ],
    });
    return config;
  },
};

3. In your (next) pages/_app.js, import your SCSS file:

import '../styles/app.scss';

That’s it! With these configurations in place, your SCSS files will be pre-compiled during the build process, reducing the load time to near-instant.

Solution 2: Using Next JS 14’s Built-in CSS Support

Next JS 14 introduces built-in support for CSS, which allows you to write CSS files directly without the need for SCSS. This approach eliminates the compilation step altogether, resulting in lightning-fast load times.

Step-by-Step Instructions

To use Next JS 14’s built-in CSS support, follow these steps:

1. Create a new file called styles/app.css in the root of your project:

/* app.css */
body {
  background-color: #f0f0f0;
}

2. In your (next) pages/_app.js, import your CSS file:

import '../styles/app.css';

That’s it! With built-in CSS support, your styles will load instantly, without any compilation delay.

Solution 3: Using a CSS-in-JS Solution

If you’re looking for a more flexible and dynamic approach, consider using a CSS-in-JS solution like Emotion or Styled Components. These libraries allow you to write CSS code directly in your JavaScript files, eliminating the need for separate CSS files.

Step-by-Step Instructions

To use Emotion with Next JS 14, follow these steps:

1. Install Emotion:

yarn add emotion

2. In your (next) pages/_app.js, import Emotion and define your styles:

import { css } from 'emotion';

const styles = css`
  body {
    background-color: #f0f0f0;
  }
`;

function App() {
  return (
    

      
    
  );
}

export default App;

With Emotion, your styles are compiled at runtime, but the compilation process is much faster than traditional SCSS compilation.

Optimizing Your SCSS Code

In addition to the solutions mentioned above, optimizing your SCSS code can also help reduce the compilation time. Here are some tips to get you started:

• Use a modular approach: Break down your SCSS code into smaller, more manageable modules.
• Avoid unnecessary nesting: Reduce the nesting of your SCSS selectors to minimize compilation time.
• Use variables: Define variables for common values to reduce code duplication and improve compilation performance.
• Optimize your imports: Only import the necessary modules and avoid importing entire libraries.

Conclusion

Next JS 14 styles taking 1s to load when using SCSS is a common issue, but with the solutions outlined above, you can significantly reduce the load time and provide a better user experience for your users. Whether you choose to pre-compile your SCSS files with Webpack, use Next JS 14’s built-in CSS support, or opt for a CSS-in-JS solution like Emotion, the key is to find the approach that works best for your project’s specific needs.

Solution	Load Time
Pre-Compilation with Webpack	near-instant
Next JS 14’s Built-in CSS Support	instant
CSS-in-JS Solution (Emotion)	faster than SCSS compilation

By implementing one or more of these solutions, you’ll be able to provide a faster and more enjoyable experience for your users, and who knows, maybe even reduce your bounce rate!

Frequently Asked Questions

Got questions about Next JS 14 styles taking 1s to load when using SCSS? We’ve got answers!