Skip to content

Commit

Permalink
Re-add _document to with-styled-components example (#35163)
Browse files Browse the repository at this point in the history
`_document.js` was removed from the styled components swc example
I have tested with and without the custom `_document.js`
Unfortunately without `_document.js` there is FOUC (Flash of unstyled content) on initial request.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
  • Loading branch information
chemicalkosek and ijjk committed Mar 10, 2022
1 parent ceb7bfb commit 7ce5d3f
Showing 1 changed file with 30 additions and 0 deletions.
30 changes: 30 additions & 0 deletions examples/with-styled-components/pages/_document.js
@@ -0,0 +1,30 @@
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage

try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
})

const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
}
} finally {
sheet.seal()
}
}
}

0 comments on commit 7ce5d3f

Please sign in to comment.