if what are you looking for is to have your css files concat and minified inside the index.html in this way:
Case 0
// index.html
...
<head>
<style>
<!-- your css concat + minified here -->
</style>
</head>
...
and not in this way
Case 1
// index.html
<head>
<link rel="stylesheet" href="path/to/bundle.min.css"/>
</head>
I think you can't achieve this with NextJS out-of-the-box solution "Built-In CSS Support for Global Stylesheets".
Reading the doc from 9.2 release (https://nextjs.org/blog/next-9-2#built-in-css-support-for-global-stylesheets) it says:
In production, all CSS files will be automatically concatenated into a single minified .css file. This CSS file will be loaded via a <link> tag and automatically injected into the default HTML markup Next.js generates.
So, it doesn't seem to me that you can achieve Case 0 with that solution.
I had the same problem of FOUC and this is how I managed for my SSR solution with Next:
- helper function to concat & minify the files I need called
prepareInPageCss.js which save a js module which returns a string with the bundled css as shown below:
const minify = require('@node-minify/core');
const cleanCSS = require('@node-minify/clean-css');
const fs = require('fs');
const bootstrapOutPutPathName = './static/css/_tempBootstrap.min.js';
const commonOutPutPathName = './static/css/_tempCommon.min.js';
const outputnameCss = './static/css/InPageCssBundle.css';
(async () => {
try {
await minify({
compressor: cleanCSS,
input: './static/css/bootstrap.min.css',
output: bootstrapOutPutPathName,
options: {
keepSpecialComments: '0'
}
});
await minify({
compressor: cleanCSS,
input: './static/css/common.css',
output: commonOutPutPathName,
options: {
keepSpecialComments: '0'
}
});
let bootstrapTempCss = fs.readFileSync(bootstrapOutPutPathName, "utf-8");
let commonTempCss = fs.readFileSync(commonOutPutPathName, "utf-8");
fs.writeFileSync(outputnameCss, bootstrapTempCss + commonTempCss);
fs.writeFileSync(outputname, "const bundledCss=String.raw`" + bootstrapTempCss + commonTempCss + "`; export default bundledCss;");
} catch (e) {
console.log(e);
}
})()
- In the file of your project where is the
head structure I've done in this way:
import commonCss from '../static/css/InPageCssBundle.js';
const isDev = ENV === 'development';
...
<title>{title}</title>
<meta name='description' content={description}/>
<meta charSet="utf-8"/>
{isDev ? <>
<link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/static/css/common.css"/>
</> :
<style>
{commonCss}
</style>
}
...
Every time I create a new build I run node path/to/file/prepareInPageCss.js.
Now, I'm not 100% sure this is the only way (I've implemented this while Next was at 9.0) and I didn't try on static export yet but hope I gave you at least a fallback solution.
Cheers
