Hydration errors when using React Compiler in Next.js

Author: callumgareCreated Nov 24, 2025Updated Nov 24, 2025

First thanks for the great library, I've always wished react had a better styling story similar to vue.

React Compiler is now stable in Next.js 16 but using it with styled-jsx results in hydrations errors:

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

It seems like styled-jsx created class names are added server side but not client side (or possibly the other way round).

I've created a reproduction example here: https://codesandbox.io/p/devbox/quirky-sea-forked-gxhzym?workspaceId=ws_32JKZYd2T1VBPZg1gzYUpy