remove unneeded deps & updated example #17651

JipSterk · 2020-10-06T11:48:54Z

ijjk · 2020-10-06T11:59:22Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	13.6s	13.4s	-168ms
nodeModulesSize	63.2 MB	63.2 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.524	2.457	-0.07
/ avg req/sec	990.42	1017.66	+27.24
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.441	1.538	⚠️ +0.1
/error-in-render avg req/sec	1735.23	1625.67	⚠️ -109.56

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d493e7d..42f5.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-f8905d4..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	14.8s	14.7s	-93ms
nodeModulesSize	63.2 MB	63.2 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-d493e7d..42f5.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-f8905d4..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_error.js	1.05 MB	1.05 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.09 MB	1.09 MB	✓
withRouter.js	1.09 MB	1.09 MB	✓
Overall change	5.4 MB	5.4 MB	✓

Commit: f414d49

lfades · 2020-10-06T15:52:46Z

@karlhorky Can you check if this fixes the issue you created about the example? 🙏

karlhorky · 2020-10-07T06:02:16Z

@JipSterk seems pretty good to me! Maybe it makes sense to have a direct dependency on @emotion/cache? Or is this not recommended for some reason?

JipSterk · 2020-10-07T16:50:19Z

@karlhorky its added now! yesterday i couldn't find it 😅

…e-with-emotion-example

ijjk · 2020-10-07T17:00:12Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	11.7s	11.7s	⚠️ +84ms
nodeModulesSize	63.2 MB	63.2 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.135	2.161	⚠️ +0.03
/ avg req/sec	1170.88	1157.03	⚠️ -13.85
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.175	1.148	-0.03
/error-in-render avg req/sec	2127.04	2177.45	+50.41

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-e5f5aee..31e1.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ff4dea7..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	13.6s	13.6s	⚠️ +27ms
nodeModulesSize	63.2 MB	63.2 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..9339.js gzip	10.9 kB	10.9 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-e5f5aee..31e1.js gzip	7.17 kB	7.17 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.8 kB	57.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	6.77 kB	6.77 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ff4dea7..dule.js gzip	6.24 kB	6.24 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.7 kB	52.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_error.js	1.05 MB	1.05 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.09 MB	1.09 MB	✓
withRouter.js	1.09 MB	1.09 MB	✓
Overall change	5.4 MB	5.4 MB	✓

Commit: 5bd210c

karlhorky · 2020-10-07T20:25:00Z

Ohh, maybe there's a problem with this approach (@mattcarlotta from #17626 (comment)):

Hold off on updating the official example, I'm experiencing FOUC during initial page load when not using the _document page!

@mitchellhamilton you wrote in the Emotion docs in Oct 2018 that Next.js doesn't need _document.js ( emotion-js/emotion#955 ).

Is it possible that this is not actually the case and that there are critical problems with this approach (in the form of FOUC - Flash of Unstyled Content)?

lfades

Blocking per the comment above, it makes a lot of sense to have a FOUC if _document is not used to collect the initial styles for the first render.

emmatown · 2020-10-08T02:34:41Z

examples/with-emotion/pages/_app.js


-import { globalStyles } from '../shared/styles'
+const App = ({ Component, pageProps }) => (
+  <CacheProvider value={cache}>


If the usages of createCache and CacheProvider are removed, the FOUC won't happen

Great, thanks for the feedback!

What are the downsides of not using the cache? Would you recommend removing the cache provider also from _app.js in this example?

Is it only for customizing the options documented at the link below (eg. prefix, Stylis plugins, key)?

https://emotion.sh/docs/cache-provider

No downsides. Yes, it should be removed. Yeah, the options at https://emotion.sh/docs/@emotion/cache#options + https://emotion.sh/docs/ssr#advanced-approach

In the interest of keeping things simple I think the with-emotion example code should literally just be the things outlined here:

#17651 (comment)

And exclude the cache and provider, to avoid confusion.

ashconnell · 2020-10-08T03:20:26Z

@JipSterk when I try to use the css prop like this:

// pages/index.js
// ...
<div css={css`color: red`}>
  Hello
</div>

The styles aren't applied and the css attribute of the div in the browser has this value You have tried to stringify object returned from cssfunction. It isn't supposed to be used directly (e.g. as value of theclassNameprop), but rather handed to emotion so it can handle it (e.g. as value ofcss prop).

Any ideas how to resolve this? I tried installing babel-plugin-emotion and updating .babelrc to this:

{
  "presets": ["next/babel"],
  "plugins": ["emotion"]
}

But that doesn't work either...

mattcarlotta · 2020-10-08T03:26:02Z

@ashconnell

Your .babelrc setup is incorrect, please check babel-preset-css-prop documentation.

In short, it should be this...

{
  "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
}

ashconnell · 2020-10-08T03:37:41Z

@mattcarlotta thanks!

I'm a bit confused as to what the current next.js with-emotion and this new PR are trying to accomplish...

I just scrapped all of this and did a basic install on top of a fresh next.js:

yarn add @emotion/core @emotion/babel-preset-css-prop
add a .babelrc with presets: ["next/babel", "@emotion/babel-preset-css-prop"]

And i had server rendering styles out of the box using css props etc like this:

<div css={css`color: red`}>
  Hello
</div>

Does the cache exist purely for hot-reloads?

Official docs even say it "just works" for Next.js

Note: This only applies if you’re using vanilla Emotion or a version of Emotion prior to v10. For v10 and above, SSR just works in Next.js.

karlhorky · 2020-10-08T08:24:29Z

@ashconnell I've asked about why the cache exists here: #17651 (comment)

In case it's only the documented reasons on the CacheProvider docs, it's for advanced configuration.

karlhorky · 2020-10-08T08:31:58Z

Update: @mattcarlotta created a reproduction of the FOUC bug: #17626 (comment)

karlhorky · 2020-10-08T12:42:55Z

@JipSterk As per Mitchell and Ash's comments above ( #17651 (comment) and #17651 (comment) ), I've added a number of suggestions for changes, which however do not include the Babel config changes:

The Babel config changes consist of a new file .babelrc, with the following content:

{
  "presets": ["next/babel", "@emotion/babel-preset-css-prop"]
}

By the way, you don't need to absolutely merge my changes from my comments above - feel free to create new commits manually that include the changes :)

ijjk · 2020-10-09T05:32:21Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	13.3s	13.3s	⚠️ +44ms
nodeModulesSize	63.4 MB	63.4 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.538	2.501	-0.04
/ avg req/sec	984.99	999.72	+14.73
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.54	1.517	-0.02
/error-in-render avg req/sec	1623.66	1647.63	+23.97

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..9b19.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-ef5fcfe..d66c.js gzip	7.24 kB	7.24 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-1c7f28c..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	995 B	995 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	15s	15.2s	⚠️ +248ms
nodeModulesSize	63.4 MB	63.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..9b19.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-ef5fcfe..d66c.js gzip	7.24 kB	7.24 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-1c7f28c..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_error.js	1.05 MB	1.05 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.09 MB	1.09 MB	✓
withRouter.js	1.09 MB	1.09 MB	✓
Overall change	5.41 MB	5.41 MB	✓

Commit: 5da980b

karlhorky · 2020-10-09T08:33:20Z

Thanks @JipSterk! Still need the .babelrc file I mentioned above, but aside from that, it's looking good.

ijjk · 2020-10-09T16:50:57Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	13.7s	13.1s	-573ms
nodeModulesSize	63.4 MB	63.4 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.373	2.405	⚠️ +0.03
/ avg req/sec	1053.71	1039.53	⚠️ -14.18
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.293	1.309	⚠️ +0.02
/error-in-render avg req/sec	1933.9	1909.43	⚠️ -24.47

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..9b19.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-ef5fcfe..d66c.js gzip	7.24 kB	7.24 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-1c7f28c..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	995 B	995 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	14.9s	15.6s	⚠️ +738ms
nodeModulesSize	63.4 MB	63.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..9b19.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-ef5fcfe..d66c.js gzip	7.24 kB	7.24 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58 kB	58 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	6.9 kB	6.9 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-1c7f28c..dule.js gzip	6.29 kB	6.29 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-409b283..e3ab.js gzip	1.32 kB	1.32 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.73 kB	7.73 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-92d3016..dule.js gzip	1.28 kB	1.28 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_error.js	1.05 MB	1.05 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.05 MB	1.05 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.09 MB	1.09 MB	✓
withRouter.js	1.09 MB	1.09 MB	✓
Overall change	5.41 MB	5.41 MB	✓

Commit: e30635f

karlhorky · 2020-10-09T21:26:40Z

@lfades this is ready for another look - seems like the FOUC issue has been cleared up.

karlhorky · 2020-10-23T16:09:09Z

Or if not @lfades, @timneutkens?

ijjk · 2020-10-28T21:40:04Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	10.7s	10.8s	⚠️ +90ms
nodeModulesSize	91.3 MB	91.3 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.015	2.087	⚠️ +0.07
/ avg req/sec	1240.84	1197.99	⚠️ -42.85
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.089	1.121	⚠️ +0.03
/error-in-render avg req/sec	2296.3	2229.66	⚠️ -66.64

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-fc2ed98..cd2b.js gzip	7.33 kB	7.33 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-20f9619..dule.js gzip	6.31 kB	6.31 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	12.8s	12s	-792ms
nodeModulesSize	91.3 MB	91.3 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-fc2ed98..cd2b.js gzip	7.33 kB	7.33 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-20f9619..dule.js gzip	6.31 kB	6.31 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.73 kB	4.73 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.11 MB	1.11 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.43 MB	5.43 MB	✓

Commit: daf5967

ijjk · 2020-10-29T01:27:54Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	12.2s	12.2s	-7ms
nodeModulesSize	91.3 MB	91.3 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.293	2.298	0
/ avg req/sec	1090.39	1087.92	⚠️ -2.47
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.264	1.207	-0.06
/error-in-render avg req/sec	1978.3	2071.81	+93.51

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-fc2ed98..cd2b.js gzip	7.33 kB	7.33 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-20f9619..dule.js gzip	6.31 kB	6.31 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	13.4s	13.3s	-111ms
nodeModulesSize	91.3 MB	91.3 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-fc2ed98..cd2b.js gzip	7.33 kB	7.33 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-20f9619..dule.js gzip	6.31 kB	6.31 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.73 kB	4.73 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.11 MB	1.11 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.43 MB	5.43 MB	✓

Commit: a85dd00

lfades

Tested in dev mode and a production build and it looks good to me!

@JipSterk Thank you!

ijjk · 2020-10-29T02:20:56Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	13.2s	12.9s	-297ms
nodeModulesSize	91.3 MB	91.3 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.561	2.585	⚠️ +0.02
/ avg req/sec	976.3	967.18	⚠️ -9.12
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.572	1.52	-0.05
/error-in-render avg req/sec	1589.9	1644.42	+54.52

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-fc2ed98..cd2b.js gzip	7.33 kB	7.33 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-20f9619..dule.js gzip	6.31 kB	6.31 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Rendered Page Sizes

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
buildDuration	14.3s	15.3s	⚠️ +977ms
nodeModulesSize	91.3 MB	91.3 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..3aa9.js gzip	11.3 kB	11.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-fc2ed98..cd2b.js gzip	7.33 kB	7.33 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.3 kB	58.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
677f882d2ed8..dule.js gzip	7.03 kB	7.03 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-20f9619..dule.js gzip	6.31 kB	6.31 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53.1 kB	53.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-41ceea0..6b62.js gzip	1.35 kB	1.35 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.75 kB	7.75 kB	✓

Client Pages Modern

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-2d41a89..dule.js gzip	1.31 kB	1.31 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.4 kB	5.4 kB	✓

Client Build Manifests

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_buildManifest.js gzip	323 B	323 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	652 B	652 B	✓

Serverless bundles

	vercel/next.js canary	JipSterk/next.js update-with-emotion-example	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.73 kB	4.73 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.11 MB	1.11 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.43 MB	5.43 MB	✓

Commit: eaf7d24

pcjmfranken · 2021-01-13T13:23:21Z

Rather than updating the outdated custom document and cache implementation as was proposed in the original issue (#17626), this PR simply removed those parts entirely. These deleted parts illustrated a Next.js-specific implementation of emotion that enabled Next.js SSR to work with things like nth-child selectors, stylis plugin customisation, and more.

An official Next.js example that doesn't provide any Next.js-specific implementation details, doesn't seem to add much value over any general setup instructions and examples from the demonstrated package's official docs. Why not just link there and eliminate some maintenance overhead :)

Just sort of braindump! Apologies if this isn't the right place for that.

karlhorky · 2021-01-13T14:01:37Z

These deleted parts illustrated a Next.js-specific implementation of emotion that enabled Next.js SSR to work with things like nth-child selectors, stylis plugin customisation, and more

Good point! Maybe there should be a second example for these types of customization, which admittedly is a more advanced use case. Want to do a PR?

doesn't seem to add much value over any general setup instructions and examples from the demonstrated package's official docs

In my experience (not only with helping students, but also just implementing myself as an experienced engineer), these examples add a lot of value. Finding and reading the instructions in the multitude of setups in the Emotion docs was for me much more difficult to wade through than a clear, working Emotion example containing all files and configuration that handles the 80-90% case. So I would argue there's a lot of value in these "simple" examples.

oliviertassinari · 2021-07-28T14:27:11Z

IMHO, using emotion without extracting critical CSS in the head should no be encouraged (what this PR does). I'm listing the downsides of the approach I can find in mui/material-ui#26561 (comment). But we will see how this turns into with the new server React components and Suspense SSR support in React 18. I have no idea.

karlhorky · 2021-07-28T14:38:11Z

cc @mitchellhamilton the comment directly above from @oliviertassinari kind of goes against what you you wrote in the Emotion docs in Oct 2018 that Next.js doesn't need _document.js ( emotion-js/emotion#955 ).

Can you shed any light on this?

remove unneeded deps & updated example

f414d49

JipSterk requested review from chibicode, ijjk, lfades, Timer and timneutkens as code owners October 6, 2020 11:48

ijjk added the examples Issue/PR related to examples label Oct 6, 2020

forgot to add dependency

e7a1ec6

Merge branch 'canary' of https://github.com/vercel/next.js into updat…

5bd210c

…e-with-emotion-example

This was referenced Oct 7, 2020

Update examples/with-emotion to remove _document.js? #17626

Closed

Docs improvements emotion-js/emotion#955

Merged

lfades requested changes Oct 8, 2020

View reviewed changes

emmatown reviewed Oct 8, 2020

View reviewed changes

add suggested changes

5da980b

add .babelrc

e30635f

Merge branch 'canary' into update-with-emotion-example

daf5967

lint fix

a85dd00

lfades approved these changes Oct 29, 2020

View reviewed changes

Merge branch 'canary' into update-with-emotion-example

eaf7d24

kodiakhq bot merged commit e058fa4 into vercel:canary Oct 29, 2020

JipSterk deleted the update-with-emotion-example branch October 29, 2020 08:00

lfades added the hacktoberfest-accepted label Oct 29, 2020

karlhorky mentioned this pull request Nov 18, 2020

Update with-emotion-11 example to use stable version #19233

Closed

2 tasks

femetrie mentioned this pull request Dec 22, 2020

Next.js + Emotion Example Causes FOUC ben-rogerson/twin.examples#19

Closed

jackbravo mentioned this pull request Jul 28, 2021

Use a newer version of the code as link examples. mui/material-ui#27440

Closed

1 task

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

remove unneeded deps & updated example #17651

remove unneeded deps & updated example #17651

JipSterk commented Oct 6, 2020 •

edited by lfades

Loading

ijjk commented Oct 6, 2020

lfades commented Oct 6, 2020

karlhorky commented Oct 7, 2020

JipSterk commented Oct 7, 2020

ijjk commented Oct 7, 2020

karlhorky commented Oct 7, 2020 •

edited

Loading

lfades left a comment

emmatown Oct 8, 2020

karlhorky Oct 8, 2020

emmatown Oct 8, 2020

ashconnell Oct 8, 2020

ashconnell commented Oct 8, 2020

mattcarlotta commented Oct 8, 2020

ashconnell commented Oct 8, 2020 •

edited

Loading

karlhorky commented Oct 8, 2020

karlhorky commented Oct 8, 2020

karlhorky commented Oct 8, 2020 •

edited

Loading

ijjk commented Oct 9, 2020

karlhorky commented Oct 9, 2020 •

edited

Loading

ijjk commented Oct 9, 2020

karlhorky commented Oct 9, 2020

karlhorky commented Oct 23, 2020

ijjk commented Oct 28, 2020

ijjk commented Oct 29, 2020

lfades left a comment

ijjk commented Oct 29, 2020

pcjmfranken commented Jan 13, 2021

karlhorky commented Jan 13, 2021

oliviertassinari commented Jul 28, 2021 •

edited

Loading

karlhorky commented Jul 28, 2021 •

edited

Loading

remove unneeded deps & updated example #17651

remove unneeded deps & updated example #17651

Conversation

JipSterk commented Oct 6, 2020 • edited by lfades Loading

ijjk commented Oct 6, 2020

Stats from current PR

lfades commented Oct 6, 2020

karlhorky commented Oct 7, 2020

JipSterk commented Oct 7, 2020

ijjk commented Oct 7, 2020

Stats from current PR

karlhorky commented Oct 7, 2020 • edited Loading

lfades left a comment

Choose a reason for hiding this comment

emmatown Oct 8, 2020

Choose a reason for hiding this comment

karlhorky Oct 8, 2020

Choose a reason for hiding this comment

emmatown Oct 8, 2020

Choose a reason for hiding this comment

ashconnell Oct 8, 2020

Choose a reason for hiding this comment

ashconnell commented Oct 8, 2020

mattcarlotta commented Oct 8, 2020

ashconnell commented Oct 8, 2020 • edited Loading

karlhorky commented Oct 8, 2020

karlhorky commented Oct 8, 2020

karlhorky commented Oct 8, 2020 • edited Loading

ijjk commented Oct 9, 2020

Stats from current PR

karlhorky commented Oct 9, 2020 • edited Loading

ijjk commented Oct 9, 2020

Stats from current PR

karlhorky commented Oct 9, 2020

karlhorky commented Oct 23, 2020

ijjk commented Oct 28, 2020

Stats from current PR

ijjk commented Oct 29, 2020

Stats from current PR

lfades left a comment

Choose a reason for hiding this comment

ijjk commented Oct 29, 2020

Stats from current PR

pcjmfranken commented Jan 13, 2021

karlhorky commented Jan 13, 2021

oliviertassinari commented Jul 28, 2021 • edited Loading

karlhorky commented Jul 28, 2021 • edited Loading

JipSterk commented Oct 6, 2020 •

edited by lfades

Loading

karlhorky commented Oct 7, 2020 •

edited

Loading

ashconnell commented Oct 8, 2020 •

edited

Loading

karlhorky commented Oct 8, 2020 •

edited

Loading

karlhorky commented Oct 9, 2020 •

edited

Loading

oliviertassinari commented Jul 28, 2021 •

edited

Loading

karlhorky commented Jul 28, 2021 •

edited

Loading