How to inline CSS in the head tag of a NextJS project?

Question

My NextJS project has the following Webpack configuration:

import path from 'path';
import glob from 'glob';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import webpack from 'webpack';
import dotenv from 'dotenv';
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';

import withSass from '@zeit/next-sass';

dotenv.config();

module.exports = withSass({
  distDir: '.build',
  webpack: (config, { dev, isServer }) => {
    if (isServer) {
      return config;
    }
    config.plugins.push(
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
      }),
    );
    config.optimization.minimizer.push(
      new OptimizeCSSAssetsPlugin({}),
    );
    return config;
  },
});

This allows me to just import any number of scss files in any page and have them all bundled together, minified as a single file, and served thus:

<link rel="stylesheet" href="/_next/static/css/styles.84a02761.chunk.css">

However, instead of <link>, I'd very much prefer to have the style definitions inlined into my <head> tag as <style></style>. Is it possible without piling up a ton of third-party modules?

If not, is it possible to at least change the resulting <link>'s rel to preload from stylesheet and also add add as="style" crossorigin to it?

score 11 · Answer 1 · answered Jul 18 '19 at 09:40

11

I managed to successfully inline my CSS by slightly tweaking the pages/_document.jsx file. I extended the <Head> component natively provided with NextJS and added it to my custom document markup. Here's a partial representation of my modifications:

import { readFileSync } from 'fs';
import { join } from 'path';

class InlineStylesHead extends Head {
  getCssLinks() {
    return this.__getInlineStyles();
  }

  __getInlineStyles() {
    const { assetPrefix, files } = this.context._documentProps;
    if (!files || files.length === 0) return null;

    return files.filter(file => /\.css$/.test(file)).map(file => (
      <style
        key={file}
        data-href={`${assetPrefix}/_next/${file}`}
        dangerouslySetInnerHTML={{
          __html: readFileSync(join(process.cwd(), '.build', file), 'utf-8'),
        }}
      />
    ));
  }
}

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en" dir="ltr">
        <InlineStylesHead>
          <meta name="theme-color" content="#ffcc66" />
        </InlineStylesHead>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

I owe this solution to https://github.com/zeit/next-plugins/issues/238#issuecomment-432211871.

answered Jul 18 '19 at 09:40

TheLearner

2,813
5
46
94

Just an FYI, this won't work anymore due to `_documentProps` no longer being available in Next.js 9.5.0+ – James Robert Singleton Aug 23 '20 at 06:00
You will need to do `const {assetPrefix, files } = this.context` – James Robert Singleton Aug 23 '20 at 20:46
1

Terminology nitpick: a `` element isn't 'inline styles', it's an **embedded stylesheet**. Inline styles are CSS properties applied directly to elements via `style` attributes. – callum Aug 27 '20 at 12:55
2

I am getting files undefined in this.context after upgrading to NextJS 9.5+ – Achal Jain Sep 10 '20 at 08:14
Same here - files and assetPrefix are both undefined in NextJs 10 – Vlad Feb 08 '21 at 19:24
1

I had to change .build to .next to make it work in production. – Aral Roca May 24 '21 at 07:54

score 9 · Answer 2 · answered Jun 01 '21 at 15:48

Next.js can now automatically inline Critical CSS

Feature is experimental and behind a flag, but we'll love to hear your feedback:

Add experimental: { optimizeCss: true } to next.config.js
Install critters@0.0.7 as a dependency

And that's it!

Reference: https://twitter.com/hdjirdeh/status/1369709676271726599

score 4 · Answer 3 · answered Mar 01 '21 at 22:15

For NextJS 9.5.0+ just use this code:

import Document, {
  Main,
  NextScript,
  Head,
  Html
} from 'next/document'

import {readFileSync} from "fs"
import {join} from "path"

class InlineStylesHead extends Head {
  getCssLinks(files) {
    const {
      assetPrefix,
      devOnlyCacheBusterQueryString,
      dynamicImports,
    } = this.context
    const cssFiles = files.allFiles.filter((f) => f.endsWith('.css'))
    const sharedFiles = new Set(files.sharedFiles)

    // Unmanaged files are CSS files that will be handled directly by the
    // webpack runtime (`mini-css-extract-plugin`).
    let dynamicCssFiles = dedupe(
      dynamicImports.filter((f) => f.file.endsWith('.css'))
    ).map((f) => f.file)
    if (dynamicCssFiles.length) {
      const existing = new Set(cssFiles)
      dynamicCssFiles = dynamicCssFiles.filter(
        (f) => !(existing.has(f) || sharedFiles.has(f))
      )
      cssFiles.push(...dynamicCssFiles)
    }

    let cssLinkElements = []
    cssFiles.forEach((file) => {

      if (!process.env.__NEXT_OPTIMIZE_CSS) {
        cssLinkElements.push(
          <style
            key={file}
            data-href={`${assetPrefix}/_next/${encodeURI(
              file
            )}${devOnlyCacheBusterQueryString}`}
            dangerouslySetInnerHTML={{
              __html: readFileSync(join(process.cwd(), '.next', file), 'utf-8'),
            }}
          />
        )
      }

      cssLinkElements.push(
        <style
          key={file}
          data-href={`${assetPrefix}/_next/${encodeURI(
            file
          )}${devOnlyCacheBusterQueryString}`}
          dangerouslySetInnerHTML={{
            __html: readFileSync(join(process.cwd(), '.next', file), 'utf-8'),
          }}
        />
      )
    })

    if (
      process.env.NODE_ENV !== 'development' &&
      process.env.__NEXT_OPTIMIZE_FONTS
    ) {
      cssLinkElements = this.makeStylesheetInert(
        cssLinkElements
      )
    }

    return cssLinkElements.length === 0 ? null : cssLinkElements
  }

}

function dedupe(bundles) {
  const files = new Set()
  const kept = []

  for (const bundle of bundles) {
    if (files.has(bundle.file)) continue
    files.add(bundle.file)
    kept.push(bundle)
  }
  return kept
}

export default class MyDocument extends Document {
  
  render() {
    return (
      <Html lang="ru" dir="ltr">
        <InlineStylesHead/>
        <body>
        <Main />
        <NextScript />
        </body>
      </Html>
    );
  }

}

Out of curiosity, why did you add this `dedupe` function? I don't see that on Next's original implementation. — Rafael Lebre, Aug 23 '22 at 15:48
This code helped me a lot but it has some errors, so I've created a [gist](https://gist.github.com/lebreRafael/1546623f730d0e93f163afadb32cb594) with some slights changes. I'm removing some `.file` because the argument is already a string, not an object, and I'm also removing the duplicated `cssLinkElements.push`. Next does that for preloading purpose, but it doesn't make sense with inline. — Rafael Lebre, Aug 23 '22 at 15:52

How to inline CSS in the head tag of a NextJS project?

3 Answers3

Linked

Related