rsnext/examples/with-react-with-styles/README.md

# Example app with react-with-styles

This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/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 `<Document />` and injecting the server side rendered styles into the `<head>`.

We are using `pages/_index.js` from this example [with-aphrodite](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite).

## Deploy your own

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-with-styles)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-with-styles&project-name=with-react-with-styles&repository-name=with-react-with-styles)

## How to use

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:

```bash
npx create-next-app --example with-react-with-styles with-react-with-styles-app
# or
yarn create next-app --example with-react-with-styles with-react-with-styles-app
# or
pnpm create next-app -- --example with-react-with-styles with-react-with-styles-app
```

Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
Example/add react-with-styles example (#2417) * Example/add react-with-styles example * fix standars next 2017-06-30 22:32:33 +02:00			`# Example app with react-with-styles`

Remove unsupported examples (#26075) Co-authored-by: JJ Kasper <jj@jjsweb.site> 2021-06-14 20:27:06 +02:00			`This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles.`
Make example READMEs more consistent (#10124) * npx create → npm init * Fix inconsistent instructions * Update amp-first * Update with-graphql-react * with-firebase-cloud-messaging * Update with-higher-order-component * change create-next-app url * Update create-next-app instruction * Update instructions to use npm instead of npx * Move "the idea behind the example" to top * Rename * Rename * Update contributing.md with a README template 2020-01-16 23:23:56 +01:00			`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 `<Document />` and injecting the server side rendered styles into the `<head>`.

Fixes #33153: Updating cross-references from master to main + canary (#33198) * copy cleanup in env. variables docs * copy cleanup in fast refresh docs * Supplements #33153 - updating existing cross-references to `master` branch to renamed default branch of `main` * Supplements #33153 - updating existing cross-references to `master` branch to renamed default branch of `main` Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> 2022-01-12 02:55:35 +01:00			We are using `pages/_index.js` from this example [with-aphrodite](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite).
Make example READMEs more consistent (#10124) * npx create → npm init * Fix inconsistent instructions * Update amp-first * Update with-graphql-react * with-firebase-cloud-messaging * Update with-higher-order-component * change create-next-app url * Update create-next-app instruction * Update instructions to use npm instead of npx * Move "the idea behind the example" to top * Rename * Rename * Update contributing.md with a README template 2020-01-16 23:23:56 +01:00
Add the deploy button to compatible examples (#9547) 2019-11-27 17:40:58 +01:00			`## Deploy your own`

Change README structure in examples (#35349) Changed the README structure in all examples to take out the Stackblitz button and include it as a link instead using a [bash script](https://gist.github.com/Nutlope/a8f3556a5a401e32a8c6278b782ebf8a/revisions). I also added the Vercel deploy button to 15 READMEs that didn't have it. 2022-03-16 22:39:26 +01:00			`Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-with-styles)`
Add the deploy button to compatible examples (#9547) 2019-11-27 17:40:58 +01:00
Fix deploy buttons URLs (#20834) Fix all deploy button URLs in the Next.js repo to follow the following format: ``` https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME> ``` The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button. Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs. --- For example, for the `hello-world` example: The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world And the deploy button looks like this: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world) --- For reference, I used the following regexes to search for the incorrect URLs ``` \(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.)\) \(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&])(.)\) \(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.)\) https://vercel.com/import/git https://vercel.com/import/select-scope https://vercel.com/import https://vercel.com/new/project ``` 2021-01-07 02:40:29 +01:00			`[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-with-styles&project-name=with-react-with-styles&repository-name=with-react-with-styles)`
Add the deploy button to compatible examples (#9547) 2019-11-27 17:40:58 +01:00
Example/add react-with-styles example (#2417) * Example/add react-with-styles example * fix standars next 2017-06-30 22:32:33 +02:00			`## How to use`

add pnpm link to docs (#37221) ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Steven <steven@ceriously.com> 2022-05-27 21:46:38 +02:00			Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme 2017-12-03 05:30:17 +01:00
Examples: use npx and yarn create to run create-next-app on examples (#4002) * remove global npm install of create-next-app * add npx to create-next-app command in examples * add bash to shell snippets * add yarn create to next-app command in examples * fix READMEs named with lowercase * change READMEs to use UPPERCASE 2018-03-14 09:09:46 +01:00			```bash
Suggest `npx` over `npm init` (#13637) This updates old examples to the more universal `npx` command. Fixes https://github.com/vercel/next.js/discussions/12103 2020-06-01 19:36:57 +02:00			`npx create-next-app --example with-react-with-styles with-react-with-styles-app`
Examples: use npx and yarn create to run create-next-app on examples (#4002) * remove global npm install of create-next-app * add npx to create-next-app command in examples * add bash to shell snippets * add yarn create to next-app command in examples * fix READMEs named with lowercase * change READMEs to use UPPERCASE 2018-03-14 09:09:46 +01:00			`# or`
			`yarn create next-app --example with-react-with-styles with-react-with-styles-app`
Updated create-next-app docs to include pnpm usage (#35755) This PR updates the docs and examples for `create-next-app` to include pnpm usage. The following script was used to update every example README: ```js const fs = require('fs') const examples = fs.readdirSync('./examples') for (let example of examples) { const filename = `./examples/${example}/README.md` const markdown = fs.readFileSync(filename, 'utf8') const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm') const output = markdown.replace(regex, (yarn, group) => { const pnpm = `pnpm create next-app -- --example ${group}` return `${yarn}\n# or\n${pnpm}` }) fs.writeFileSync(filename, output) } ``` 2022-03-30 23:03:21 +02:00			`# or`
			`pnpm create next-app -- --example with-react-with-styles with-react-with-styles-app`
examples: add create-next-app (#3377) * examples: add create-next-app * fix with-typescript readme 2017-12-03 05:30:17 +01:00			```

Fix deploy buttons URLs (#20834) Fix all deploy button URLs in the Next.js repo to follow the following format: ``` https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME> ``` The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button. Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs. --- For example, for the `hello-world` example: The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world And the deploy button looks like this: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world) --- For reference, I used the following regexes to search for the incorrect URLs ``` \(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.)\) \(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&])(.)\) \(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.)\) https://vercel.com/import/git https://vercel.com/import/select-scope https://vercel.com/import https://vercel.com/new/project ``` 2021-01-07 02:40:29 +01:00			`Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).`