Why is a statically generated page unstyled when sent to the client? [duplicate]

Question

When running the Next.js official boilerplate npx create-next-app and previewing it in the browser, I noticed the statically generated html document isn't styled:

I believe this could lead to FOUC problems. How can I make sure that the page is already styled when served to the client, as in the case of Next.js' official site:

Note: I just created a boilerplate project using npx create-next-app and did not modify any code. I am using Next.js v12.0.7 and React v17.0.2.

Answer 1

To get the response similar to Next.js' website, you need to inline critical CSS. This is (still) experimental in [email protected] (and undocumented). To enable it modify your next.config.js:

module.exports = {
  experimental: { optimizeCss: true }
}

You need to install critters (yarn add -D critters or npm i -D critters) for this to work. Also, you need to run production build (next build && next start) not a dev one like you're doing in that image you have shared.

Result: