History

Luc Leray f52955ec94 Clean up examples `package.json` (#27121 ) Clean up package.json files in the `examples` directory: - Add `private: true` - Remove `version` (because they are irrelevant for packages that are not meant to be published) - Remove `name` (because they are optional for packages that are not meant to be published, and when someone clones an example, they often rename it and the property becomes stale) - Remove `author` - Remove `description` - Remove `license` Also remove `with-dynamic-app-layout` example completely, since it does the same as `layout-component` (https://github.com/vercel/next.js/pull/27121#discussion_r668178408). ## Documentation / Examples - [x] Make sure the linting passes		2021-07-12 19:58:03 +00:00
..
pages	Add an example for styled-jsx with content security policy (#23021 )	2021-03-12 19:03:24 +00:00
.gitignore	Add an example for styled-jsx with content security policy (#23021 )	2021-03-12 19:03:24 +00:00
package.json	Clean up examples `package.json` (#27121 )	2021-07-12 19:58:03 +00:00
README.md	docs: add 'Open in StackBlitz' buttons to various examples (#25853 )	2021-06-08 20:45:02 +00:00

README.md

Styled-JSX with Content Security Policy

This example showcases how you can use nonce for style-src directive in Content Security Policy with styled-jsx.

Checkout the demo and notice the following,

style-src directive in Content-Security-Policy response header.
meta tag to pass on the nonce to styled-jsx for client-side rendering.
style tags with nonce attributes.

Preview

Preview the example live on StackBlitz:

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 styled-jsx-with-csp styled-jsx-with-csp-app
# or
yarn create next-app --example styled-jsx-with-csp styled-jsx-with-csp-app

Deploy it to the cloud with Vercel (Documentation).