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;