'How to make NextJS inject styles inline in production?

By default, NextJS will inject <style> tags inline inside head in development (possibly using style-loader under the hood).

In production mode, NextJS will extract css chunks and serve them as separate css files from _next/static directory. I debugged webpack config NextJS serves by default and noticed it uses mini-css-extract-plugin under the hood to achieve this behavior.

The problem is, for my needs I need NextJS to inject inline styles in production as well. What is the easiest way to achieve this?

Here is the current next.config.js that I use

const nextConfig = {
    useFileSystemPublicRoutes: false,
    poweredByHeader: false,
    assetPrefix: '',
    webpack(config) {
        console.dir(config.module.rules, { depth: null, colors: true });
        config.module.rules.push({
            test: /\.svg$/,
            use: ['@svgr/webpack'],
        });

        return config;
    },
};

module.exports = nextConfig;

Solution 1:^[1]

You can use next/head to append <head>.

https://nextjs.org/docs/api-reference/next/head

By the way; inline-styles may be understood as <div style=".." /> I think you are asking style tags inside head; to avoid confusion; you can edit your post to clarify that little bit.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Emre A

'How to make NextJS inject styles inline in production?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]