How to add Styled components in Next.js App router

Styled components have become a popular choice for styling React applications due to their simplicity and flexibility. When it comes to integrating styled components into a Next.js application, it’s essential to understand how to leverage them effectively within the app router. In this guide, we’ll explore step-by-step how to add styled components to a Next.js app router to enhance the visual appeal and maintainability of your application.

Table of Contents

What is Styled Components?

Styled components are a CSS-in-JS library that allows developers to write CSS directly within their JavaScript code. They offer a more cohesive approach to styling by encapsulating styles within individual components, making it easier to manage and reuse styling logic across the application.

Also Read: How to use CSS Animations with Styled Components

Setting Up Next.js App

Before we can start integrating styled components, we need to set up a Next.js project. If you haven’t already installed Next.js, you can do so by running the following command:

npx create-next-app my-next-app

This command will create a new Next.js project with all the necessary dependencies installed.

Styled Components in Next.js

Installing Styled Components in Next.js

To begin using styled components in our Next.js app, we need to install the styled-components package. We can do this by running the following command:

npm install styled-components

#or

yarn add styled-components

Setup Styled Components in Next.js App Router

First, we need to enable the styledComponents compiler in the next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: true,
  },
};

export default nextConfig;

Add the Global style registry

A global style registry component that gathers all the styles and applies them to the tag is suggested to be implemented by Next.js. Make sure you have the lib/registry.tsx file created and add the following:

'use client'
 
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
 
export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return <>{styles}</>
  })
 
  if (typeof window !== 'undefined') return <>{children}</>
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  )
}

Import StyledComponentsRegistry into your root layout.tsx file, then wrap children in it:

import StyledComponentsRegistry from './lib/registry'

export default function RootLayout(props: React.PropsWithChildren) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>
          {props.children}
        </StyledComponentsRegistry>
      </body>
    </html>
  )
}

Also Read: How to use both Tailwind and Styled Components in Next JS

Add Styled Components global styles

You can add typefaces, reset or normalise CSS, and apply any other style you want to use worldwide in the global styles section.

Using the createGlobalStyle() function, you can accomplish this. Make the file styles/GlobalStyles.ts and add the following to it:

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  // your global styles
`;

export default GlobalStyles;

Please import and add the GlobalStyles component to your root layout.tsx file.

import StyledComponentsRegistry from './lib/registry'
import GlobalStyles from './styles/GlobalStyles';

export default function RootLayout(props: React.PropsWithChildren) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>
          <GlobalStyles />
          {props.children}
        </StyledComponentsRegistry>
      </body>
    </html>
  )
}

Also Read: How to use both Tailwind and Styled Components in Next JS

Add a theme in Styled Components

It’s possible that you need to access global variables in several components, such as font sizes, colours, or other configurations. To do that, you can utilise a theme:

Make a file called styles/theme.ts and fill it with your colour scheme:

const theme = {
  colors: {
    colorName1: '#001100',
    colorName2: '#001100',
    ...
  },
};

export default theme;

Import ThemeProvider and your theme into your root layout.tsx file, then wrap children in it:

'use client';

import StyledComponentsRegistry from './lib/registry'
import GlobalStyles from './styles/GlobalStyles';
import { ThemeProvider } from 'styled-components';
import theme from './styles/theme';

export default function RootLayout(props: React.PropsWithChildren) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>
          <GlobalStyles />
          <ThemeProvider theme={theme}>
            {props.children}
          </ThemeProvider>
        </StyledComponentsRegistry>
      </body>
    </html>
  )
}

Access the theme in your components:

import { styled } from 'styled-components';

export const MyDiv = styled.div`
  background-color: ${({ theme }) => theme.colors.colorName1};
`;

Conclusion

In conclusion, adding styled components to a Next js app router can enhance the visual appeal and maintainability of your application. By following the steps outlined in this guide and adhering to best practices, you can leverage the power of styled components to create beautiful and performant Next.js applications.