next-styled-components

Styled-Components that are compatible with Next.js server components (RSC).

The goal of this library is that you should be able to use it as the original library and it will work with not only client components but also new server ones (RSC).

This library covers most important parts of the original lib API:

styled(Component)
styled.element
createGlobalStyle
keyframes
<ThemeProvider />
<StyleSheetManager />

There are still some things that have not yet been ported from the original lib. Also there are some things that work slightly differently or currently are hard to implement because of limitations of RSCs.

How to install

npm i next-styled-components

How to use it

The most important part is to surround all your styled components with <StyleSheetManager />. This component takes care of gathering all styles on the server and on the client and placing the css styles within HTML tree.

Example src/app/layout.tsx:

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { createGlobalStyle, StyleSheetManager, ThemeProvider } from 'next-styled-components';

const inter = Inter({ subsets: ['latin'] });

const GlobalStyle = createGlobalStyle`
  html, body {
    color: white;
    background-color: black;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }
`;

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <StyleSheetManager>
          <ThemeProvider theme={{ primaryColor: 'blue' }}>
            <GlobalStyle />
            {children}
          </ThemeProvider>
        </StyleSheetManager>
      </body>
    </html>
  );
}

Example src/app/page.tsx:

import { css, keyframes, styled } from 'next-styled-components';
import { Client } from './client';

const textCss = css`
  text-transform: capitalize;
  text-decoration: underline;
  font-style: italic;
`;

const fadeInOutAnimation = keyframes`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`;

const Secondary = styled.span.attrs<{ $isOn: boolean }>(() => ({ role: 'alert' }))`
  display: block;
  width: 100px;
  height: 100px;
  background-color: ${({ theme }) => theme.primaryColor};
  animation: ${fadeInOutAnimation} 1s infinite alternate;
`;

const Main = styled.div<{ color: string }>`
  width: 150px;
  height: 150px;
  padding: 10px;
  background-color: ${({ color }) => color};
  position: relative;

  ${textCss};

  &:hover {
    background-color: yellow;
  }

  & > ${Secondary} {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
`;

export default function Home() {
  return (
    <>
      <Main color="red">
        Server Component
        <Secondary $isOn />
      </Main>
      <Client />
    </>
  );
}

And an example of some client component src/app/client.tsx:

'use client';

import { styled } from 'next-styled-components';
import { useState } from 'react';

const StyledDiv = styled.div<{ $isOn: boolean }>`
  width: 150px;
  height: 150px;
  padding: 10px;
  background-color: ${({ $isOn }) => ($isOn ? 'pink' : 'green')};
`;

export const Client = () => {
  const [isOn, setIsOnClick] = useState(false);

  return (
    <StyledDiv $isOn={isOn} onClick={() => setIsOnClick((prev) => !prev)}>
      Client Component
    </StyledDiv>
  );
};

And if you want to type your theme create a type file, for example src/next-styled-components.d.ts:

import 'next-styled-components';

declare module 'next-styled-components' {
  export interface DefaultTheme {
    primaryColor: string;
  }
}

How does it work

As of September 2024, original Styled-Components library do not work with Next.js RSC due to the use of React Context which is not permitted. So this library is trying to use good old single global object to communicate between components. After some trials and errors I found a setup that seems to work just right. This library needs some more real world scenarios testing, so please report any issues you find.

For more details, just look into the source code