Example app with styled-components

This example features how you use a different styling solution than 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 styled-components.

This example uses the Rust-based SWC in Next.js for better performance than Babel.

Currently, only the ssr and displayName transforms have been implemented. These two transforms are the main requirement for using styled-components in Next.js.

Deploy your own

How to use

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

npx create-next-app --example with-styled-components with-styled-components-app

yarn create next-app --example with-styled-components with-styled-components-app

pnpm create next-app --example with-styled-components with-styled-components-app

Deploy it to the cloud with Vercel (Documentation).

Try it on CodeSandbox

Open this example on CodeSandbox