rsnext/examples/styled-jsx-with-csp
Marcos Bérgamo c3e5caf110
docs(examples): improve DX while copying command to create new project (#38410)
* docs(examples): improve DX while copy command to create new project

* chore: apply code review

Co-authored-by: Marcos Bérgamo <Marcos.Bergamo@refinitiv.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-07-26 21:57:48 -05:00
..
pages Add options to defaultGetInitialProps and upgrade styled-jsx-with-csp example (#32594) 2021-12-17 23:27:56 +00:00
.gitignore Update default gitignore templates (#39051) 2022-07-26 20:08:40 -05:00
package.json Add options to defaultGetInitialProps and upgrade styled-jsx-with-csp example (#32594) 2021-12-17 23:27:56 +00:00
README.md docs(examples): improve DX while copying command to create new project (#38410) 2022-07-26 21:57:48 -05:00

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.

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

Deploy with Vercel

How to use

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

npx create-next-app --example styled-jsx-with-csp styled-jsx-with-csp-app
yarn create next-app --example styled-jsx-with-csp styled-jsx-with-csp-app
pnpm create next-app --example styled-jsx-with-csp styled-jsx-with-csp-app

Deploy it to the cloud with Vercel (Documentation).