Nextjs Templates & Themes Logo Nextjs Templates & Themes
Appgram Base screenshot

Appgram Base

Author Avatar Theme by Diegocravo
Updated: 22 Feb 2021
5 Stars

JamStack Project.

Github Live Preview

Categories

React Styled components Datocms

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:

  1. Run the command create-next-app with npm or Yarn to bootstrap the example:
npx create-next-app <example-name>

OR

yarn create next-app <example-name>
  1. 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.