diff --git a/examples/with-react-with-styles/README.md b/examples/with-react-with-styles/README.md new file mode 100644 index 00000000..9b865922 --- /dev/null +++ b/examples/with-react-with-styles/README.md @@ -0,0 +1,35 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-with-styles) + +# Example app with react-with-styles + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-with-styles +cd with-react-with-styles +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. +That means we can serve the required styles for the first render within the HTML and then load the rest in the client. +In this case we are using [react-with-styles](https://github.com/airbnb/react-with-styles). + +For this purpose we are extending the `` and injecting the server side rendered styles into the ``. + +We are using `pages/_index.js` from this example [with-aphrodite](https://github.com/zeit/next.js/tree/v3-beta/examples/with-aphrodite). \ No newline at end of file diff --git a/examples/with-react-with-styles/defaultTheme.js b/examples/with-react-with-styles/defaultTheme.js new file mode 100644 index 00000000..b5c96e60 --- /dev/null +++ b/examples/with-react-with-styles/defaultTheme.js @@ -0,0 +1,5 @@ +export default { + color: { + primary: 'salmon' + } +} diff --git a/examples/with-react-with-styles/package.json b/examples/with-react-with-styles/package.json new file mode 100644 index 00000000..fbb0af3b --- /dev/null +++ b/examples/with-react-with-styles/package.json @@ -0,0 +1,18 @@ +{ + "name": "with-react-with-styles", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "aphrodite": "^1.2.1", + "next": "latest", + "react": "^15.6.1", + "react-dom": "^15.6.1", + "react-with-styles": "^1.4.0", + "react-with-styles-interface-aphrodite": "^1.2.0" + }, + "license": "MIT" +} diff --git a/examples/with-react-with-styles/pages/_document.js b/examples/with-react-with-styles/pages/_document.js new file mode 100644 index 00000000..516cdbc2 --- /dev/null +++ b/examples/with-react-with-styles/pages/_document.js @@ -0,0 +1,39 @@ +import Document, { Head, Main, NextScript } from 'next/document' +import { StyleSheetServer } from 'aphrodite' + +export default class MyDocument extends Document { + static async getInitialProps ({ renderPage }) { + const { html, css } = StyleSheetServer.renderStatic(() => renderPage()) + const ids = css.renderedClassNames + return { ...html, css, ids } + } + + constructor (props) { + super(props) + /* Take the renderedClassNames from aphrodite (as generated + in getInitialProps) and assign them to __NEXT_DATA__ so that they + are accessible to the client for rehydration. */ + const { __NEXT_DATA__, ids } = props + if (ids) { + __NEXT_DATA__.ids = this.props.ids + } + } + + render () { + /* Make sure to use data-aphrodite attribute in the style tag here + so that aphrodite knows which style tag it's in control of when + the client goes to render styles. If you don't you'll get a second +