789a665a03
> Based on https://github.com/vercel/next.js/blob/v12.0.1/packages/next/server/render.tsx#L522-L532, this avoids the need for double page render. After investigation, the potential unneeded render has been introduced in the official [example](https://github.com/vercel/next.js/pull/20228/files#diff-3976da223aaf15067ecdd0734ca277ebf4629c46d62f89d732ab392752d3572dR6) but does not exist in the earlier proposed [solution](https://gist.github.com/colinhacks/c40519a6a050a99091862319151377ec). There might a reason (layered override?) for it but I am unable to find relevant explanation. Original discussion in https://github.com/mantinedev/mantine/pull/348. ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` |
||
---|---|---|
.. | ||
pages | ||
shared | ||
.babelrc | ||
.gitignore | ||
package.json | ||
README.md |
Emotion Vanilla Example
Extract and inline critical css with emotion, @emotion/server, @emotion/css
Preview
Preview the example live on StackBlitz:
Deploy your own
Deploy the example using Vercel:
How to use
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example with-emotion-vanilla with-emotion-vanilla-app
# or
yarn create next-app --example with-emotion-vanilla with-emotion-vanilla-app
Deploy it to the cloud with Vercel (Documentation).