4

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:

enter image description here

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:

enter image description here

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Kazuto_Ute
  • 679
  • 6
  • 20
  • Perhaps you use something like this: https://github.com/t09tanaka/next-critical – Dominik Dec 09 '21 at 01:59
  • 1
    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)? You need to inline the CSS for that to work. – juliomalves Dec 09 '21 at 18:52

1 Answers1

4

To get the response similar to Next.js' website, you need to inline critical CSS. This is (still) experimental in next@12.0.7 (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:

brc-dd
  • 10,788
  • 3
  • 47
  • 67