Github Stars:
Last Commit: 
Created: 
Overview
This article provides an example of an application that uses styled-components, a different styling solution compared to styled-jsx. It focuses on the support for universal styles, allowing for the server-side rendering of required styles within the HTML and then loading the remaining styles on the client. The example also includes setting up a global theme for styled-components using NextJS custom <App> component.
Features
- Different styling solution compared to styled-jsx
- Supports universal styles by serving required styles in HTML for the first render and loading the rest on the client
- Extends the <Document /> to inject server-side rendered styles to the <head>
- Requires babel-plugin-styled-components for server-side rendering
- Sets up a global theme for styled-components using NextJS custom <App> component
Installation
To install and use the example, follow these steps:
- Run the command
create-next-appwith npm or Yarn to bootstrap the example:
npx create-next-app <example-name>
OR
yarn create next-app <example-name>
- Deploy the example to the cloud using Vercel by following the Vercel documentation.
Summary
This article showcases an example application that utilizes styled-components, a versatile styling solution that supports universal styles. It provides insights into setting up server-side rendering for the required styles and loading the remaining styles on the client. Additionally, it demonstrates the usage of a global theme for styled-components in NextJS. The installation process includes using create-next-app and deploying the example using Vercel.
