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

Feature request

Is your feature request related to a problem? Please describe.

The examples/with-emotion example is using Emotion 10.

According to the Emotion SSR docs, the _document.js file is no longer required:

Suggested Solution: Maybe this file can be removed?

---

Secondly, I noticed that the cache is using the original emotion as a dependency:

https://github.com/vercel/next.js/blob/dd264f582f547508b5b5af2cf1dc665a9c53f8e5/examples/with-emotion/pages/_app.js#L5

Suggested Solution: Maybe this can be switched to use the createCache function from @emotion/cache instead?

Describe the solution you’d like

Solutions suggested above.

Describe alternatives you’ve considered

Leave things how they are (more code, but maybe still works?)

[mattcarlotta]

Update: I was able to replicate the FOUC when using getStaticProps with revalidate:

Update: No longer an issue. See comment below.

1.) Clone repo: git clone [e-mail]:mattcarlotta/emotion-fouc.git

2.) Cd into project: cd emotion-fouc

3.) Install, build and start local build: yarn && yarn build && yarn start

4.) Visit http://localhost:3000/ (should load page without FOUC), then do a hard refresh at least 5 times: ctrl/cmd + f5 (should notice FOUC).

5.) Open chrome tab, open dev tools, under Network tab change the Online option to Slow 3G and hard refresh again.

6.) The page will show FOUC during initial page load:

and styled components once loaded:

[mattcarlotta]

Switching to @emotion/cache without extracting styles in the _document appears to be working well in development and in production. Ran some e2e tests using cypress in staging, as well as some unit tests with jest-emotion, and they all passed. In terms of performance, appears to be no loss switching between the two in production:

Before (custom document): Lighthouse After (cache): Lighthouse

Then again, I only use @emotion/styled with the @emotion/babel-preset-css-prop babel preset, so you (or whoever) may want to test their other APIs (like jsx and css from @emotion/core, as well testing in v11.0.x-x-next) before completely removing the _document page from the official example(s).