Next.js › Styling in Next.js (CSS Modules, Tailwind & Styled Components)

How do styled components or other CSS in JS libraries work in the Next.js App Router, given the presence of server components?

Intermediate

Answer

Many CSS in JS libraries require a use client directive since they rely on runtime JavaScript to inject styles, and some libraries provide specific integration instructions for the App Router to ensure their generated styles are correctly included in the server rendered HTML rather than causing a flash of unstyled content.

'use client';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 8px 16px;
`;

export default function Button() {
  return <StyledButton>Click me</StyledButton>;
}

Real-world example A team using styled components in their App Router project follows the library's specific setup guide to avoid a brief flash of unstyled content when pages first load.

Common follow-ups: Why does using a CSS in JS library often require marking components as client components?;What performance tradeoffs come with using CSS in JS compared to CSS Modules?

Client Components & Hydration;Web Vitals & Performance Monitoring