How can critical CSS be dynamically added to Next.js using _document.js/_app.js?

Question

How can critical CSS be dynamically added to Next.js using _document.js/_app.js?

I'm currently following the native next.js style approach using css modules. Within my project, I have multiple global css variables defined in theme files that need to be added to the app. Here is an example of what one of these theme files looks like:

// theme.css
:root {
    --PRIMARY_COLOR: #504f94;
    --PRIMARY_BRIGHT_COLOR: #926ba7;
    --PRIMARY_COLOR_ACCENT: #3e3d81;

    --SECONDARY_COLOR: #102f31;
    --SECONDARY_COLOR_ACCENT: #1d2020;

}

The challenge I am facing is that I have several of these theme files in my project and I need to select and use only one based on an environment variable. This decision needs to be made server-side.

My question is, how can I dynamically insert styles into custom _document.js or _app.js after deciding which theme to use? Additionally, I want to ensure that only the selected theme's code gets included in the bundle and not others.

css reactjs next.js server-side-rendering

Answer 1

Answer №1

After much consideration, I have devised the following solution:

To start off, in _document.js we will execute a script that utilizes the fs module to read the content of a file containing CSS variables.
We will then proceed to create a style tag with the contents extracted from the file mentioned earlier.
Finally, we will insert the generated tag into the _document component.

import React from 'react';
import { default as Document, Html, Head, Main, NextScript } from 'next/document';
const path = require('path');
const { getRootDirPathEnvVariable } = require('../infrastructure');

export default class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head/>
                <body>
                    { this.props.tagToInject}
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}


MyDocument.getInitialProps = async ( ctx ) => {

    const cssFileContent = fs
        .readFileSync( path.join( getRootDirPathEnvVariable(), 'src', 'theme.css' ) )
        .toString();

    const tagToInject = (
        <style
                className="css-configs"
                dangerouslySetInnerHTML={ {
                    __html: value,
                } }
         />
    )

    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () => originalRenderPage( {
        enhanceApp: ( App ) => function EnhanceApp( props ) {
            return (
                <App
                    jsonConfigs={ jsonConfigs }
                    { ...props }
                />
            );
        },
    } );

    const initialProps = await Document.getInitialProps( ctx );

    return {
        ...initialProps,
        tagToInject,
    };
};

Answer 2

After much consideration, I have devised the following solution:

To start off, in _document.js we will execute a script that utilizes the fs module to read the content of a file containing CSS variables.
We will then proceed to create a style tag with the contents extracted from the file mentioned earlier.
Finally, we will insert the generated tag into the _document component.

import React from 'react';
import { default as Document, Html, Head, Main, NextScript } from 'next/document';
const path = require('path');
const { getRootDirPathEnvVariable } = require('../infrastructure');

export default class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head/>
                <body>
                    { this.props.tagToInject}
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}


MyDocument.getInitialProps = async ( ctx ) => {

    const cssFileContent = fs
        .readFileSync( path.join( getRootDirPathEnvVariable(), 'src', 'theme.css' ) )
        .toString();

    const tagToInject = (
        <style
                className="css-configs"
                dangerouslySetInnerHTML={ {
                    __html: value,
                } }
         />
    )

    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () => originalRenderPage( {
        enhanceApp: ( App ) => function EnhanceApp( props ) {
            return (
                <App
                    jsonConfigs={ jsonConfigs }
                    { ...props }
                />
            );
        },
    } );

    const initialProps = await Document.getInitialProps( ctx );

    return {
        ...initialProps,
        tagToInject,
    };
};

How can critical CSS be dynamically added to Next.js using _document.js/_app.js?

Answer №1

Similar questions

expandable div or cell panels

Click on ng-show to reveal more text in AngularJS

The Redux state fails to update on the initial attempt

What is the method for customizing the NavBar color using CSS?

Using dispatch in Redux does not introduce new information into the store

Cookies are not persisting in the browser even after successful login on a React Node.js application deployed on Render hosting platform

Unable to apply inline styles to React Component

An error occurred due to RequestHeaderSectionTooLarge after successfully signing in through NextAuth with AzureADProvider

Tips for understanding nested JSON or array data structure?

Placing elements in Chrome compared to IE

Having trouble with the containerElement in React material-ui's MenuItem component?

Troubleshooting problem with React Material UI GridList layout

Swap out a div identifier and reload the page without a full page refresh

When you first open material-ui cards, there are no default CSS styles applied

Opt for filling background image instead of stretching it when the screen is resized

Having trouble sending `req.params` through http-proxy-middleware in a NodeJS/Express application?

The table width is malfunctioning on Firefox when viewed in HTML

Dispatching an asynchronous function error in React with TypeScript and Redux - the parameter type is not assignable to AnyAction

JavaScript for Color Swapping on Click Event

Steps for removing the bottom border for the last child in the Material UI Box Component