title: How to inline CSS in the head tag of a NextJS project?
body: <p>My NextJS project has the following Webpack configuration:</p>
  
  <pre><code>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 }) =&gt; {
      if (isServer) {
        return config;
      }
      config.plugins.push(
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 1,
        }),
      );
      config.optimization.minimizer.push(
        new OptimizeCSSAssetsPlugin({}),
      );
      return config;
    },
  });
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="/_next/static/css/styles.84a02761.chunk.css"&gt;
  </code></pre>
  
  <p>However, instead of <code>&lt;link&gt;</code>, I'd very much prefer to have the style definitions inlined into my <code>&lt;head&gt;</code> tag as <code>&lt;style&gt;&lt;/style&gt;</code>. Is it possible without piling up a ton of third-party modules?</p>
  
  <p>If not, is it possible to at least change the resulting <code>&lt;link&gt;</code>'s <code>rel</code> to <code>preload</code> from <code>stylesheet</code> and also add add <code>as="style" crossorigin</code> to it?</p>