StyledComponent Registry for Next.js 14+

ssr-style-registry.tsx

"use client";

import React, { useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";

type SSRStyledComponentRegistryProps = {
	children: React.ReactNode;
};
/**
 * Reduces (does not prevent) FOUC when using StyledComponents
 * @description
 * StyledComponents forces the "use client" directive in Next 14+,
 * removing the SSR benefits and increasing style hydration
 * @link https://medium.com/@felipe.nava/using-styled-components-in-nextjs-app-router-35295688e27a
 */
export const SSRStyledComponentRegistry = ({
	children,
}: SSRStyledComponentRegistryProps) => {
	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>
	);
};