terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Add SSR to examples/with-styled-components + bump styled_components v2 (#1908)

Browse source
This commit is contained in:
Grokling 2017-05-08 00:25:33 +12:00 committed by Tim Neutkens
parent 12f423faf9
commit 1b893518bb
3 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
examples/with-styled-components/.babelrc Normal file
View file

@ -0,0 +1,9 @@
{
"presets": [
"next/babel",
"stage-0"
],
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
]
}

4
examples/with-styled-components/package.json
View file

@ -7,10 +7,12 @@
"start": "next start" "start": "next start"
}, },
"dependencies": { "dependencies": {
"babel-plugin-styled-components": "^1.1.4",
"babel-preset-stage-0": "^6.24.1",
"next": "latest", "next": "latest",
"react": "^15.4.2", "react": "^15.4.2",
"react-dom": "^15.4.2", "react-dom": "^15.4.2",
"styled-components": "^1.4.4" "styled-components": "^2.0.0-17"
}, },
"author": "", "author": "",
"license": "ISC" "license": "ISC"

18
examples/with-styled-components/pages/_document.js
View file

@ -1,23 +1,21 @@
import Document, { Head, Main, NextScript } from 'next/document' import Document, { Head, Main, NextScript } from 'next/document'
import styleSheet from 'styled-components/lib/models/StyleSheet' import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document { export default class MyDocument extends Document {
static async getInitialProps ({ renderPage }) {
const page = renderPage()
const styles = (
<style dangerouslySetInnerHTML={{ __html: styleSheet.rules().map(rule => rule.cssText).join('\n') }} />
)
return { ...page, styles }
}
render () { render () {
const sheet = new ServerStyleSheet()
const main = sheet.collectStyles(<Main />)
const styleTags = sheet.getStyleElement()
return ( return (
<html> <html>
<Head> <Head>
<title>My page</title> <title>My page</title>
{styleTags}
</Head> </Head>
<body> <body>
<Main /> <div className='root'>
{main}
</div>
<NextScript /> <NextScript />
</body> </body>
</html> </html>