0

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;
Sigex
  • 2,834
  • 2
  • 24
  • 25
Mister M
  • 1,539
  • 3
  • 17
  • 37
  • Does this answer your question: [How to inline CSS in the head tag of a NextJS project?](https://stackoverflow.com/questions/57057947/how-to-inline-css-in-the-head-tag-of-a-nextjs-project)? – juliomalves May 02 '22 at 16:15

1 Answers1

0

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.

Emre A
  • 240
  • 1
  • 6
  • Any idea if NextJS allows us to actually do online styles? I’m getting it to produce my email templates for me. I would like to have true inline styles as ‘style=“*”’ and not load from ‘’ and not from a file. This is to maximise email client compatibility. – Sigex Oct 21 '22 at 22:44