Next.js Discord

Discord Forum

Styled Components in Next.js 13 server components

Answered
Pacific herring posted this in #help-forum
Open in Discord
Pacific herringOP
I am confused and would like to clarify one thing - is there currently a way to use Styled Components in Next.js 13 in server components? or is it possible to use them only in client components?
Answered by Marchy
https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components
View full answer

8 Replies

B33fb0n3
Yes, you can use Styled Components in the Next.js 13 app directory. The process involves creating a global registry component to collect all CSS style rules generated during a render, and a function to return those rules. Then, you use the useServerInsertedHTML hook to inject the styles collected in the registry into the <head> HTML tag in the root layout.

Here is an example of how to configure styled-components@6 or newer:

// lib/registry.tsx
'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
 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>
 )
}
Then, you wrap the children of the root layout with the style registry component:

// app/layout.tsx
import StyledComponentsRegistry from './lib/registry'
 
export default function RootLayout({
 children,
}: {
 children: React.ReactNode
}) {
 return (
 <html>
 <body>
 <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
 </body>
 </html>
 )
}
You can view an example here (https://github.com/vercel/app-playground/tree/main/app/styling/styled-components).
During server rendering, styles will be extracted to a global registry and flushed to the <head> of your HTML. This ensures the style rules are placed before any content that might use them. During streaming, styles from each chunk will be collected and appended to existing styles. After client-side hydration is complete, styled-components will take over as usual and inject any further dynamic styles.
@Pacific herring <@301376057326567425> thx, I am aware of that, though the question is specifically about the server components in Next 13. Namely, is it currently only possible to use Styled Components in client components (with 'use client') or in server components as well‽
B33fb0n3
As far as I saw it, it’s only possible with a client component. You can use things like tailwind css. With it you can simply style your code. After that you can build components and the best thing: everything runs on serverside 😊
Answer
Pacific herringOP
thx