History

Luc Leray 8eaabe2fb0 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 01:40:29 +00:00
..
pages	Add CSS Modules examples to docs (#15601 )	2020-07-29 14:43:48 +00:00
.gitignore	Add CSS Modules examples to docs (#15601 )	2020-07-29 14:43:48 +00:00
package.json	Add CSS Modules examples to docs (#15601 )	2020-07-29 14:43:48 +00:00
README.md	Fix deploy buttons URLs (#20834 )	2021-01-07 01:40:29 +00:00

README.md

styled-jsx example

Next.js ships with styled-jsx allowing you to write scoped styled components with full CSS support. This is important for the modularity and code size of your bundles and also for the learning curve of the framework. If you know CSS you can write styled-jsx right away.

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-styled-jsx with-styled-jsx-app
# or
yarn create next-app --example with-styled-jsx with-styled-jsx-app

Deploy it to the cloud with Vercel (Documentation).