Anyone have any idea how to use React-JSS within an Ant Design and Next.js App Router? I keep getting errors about CSS being wrong on the client and server side. I am not sure what the React-JSS wrapper should look like and whether it should be client-side or server-side. Also, does the Ant Design registry make any difference to it?
EDIT:
below is some sample code.
//registry.tsx
'use client';
import { useEffect } from 'react';
import { JssProvider, SheetsRegistry, createGenerateId } from 'react-jss';
import { useServerInsertedHTML } from 'next/navigation';
export default function JssRegistry({ children }: { children: React.ReactNode }) {
const registry = new SheetsRegistry();
const generatedId = createGenerateId();
useServerInsertedHTML(() => {
return <style id="server-side-styes">{registry.toString()}</style>;
});
useEffect(() => {
const style = document.getElementById('server-side-styles');
if (style && style.parentNode) {
style.parentNode.removeChild(style);
}
}, []);
return (
<JssProvider registry={registry} generateId={generatedId} id={{ minify: true }}>
{children}
</JssProvider>
);
}
//layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<ReactQueryProvider>
<Suspense>
<AntdApp>
<AppLayout>{children}</AppLayout>
</AntdApp>
</Suspense>
</ReactQueryProvider>
</body>
</html>
);
}
//antdprovider
'use client';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import { App, ConfigProvider, theme } from 'antd';
const AntdApp = ({
children,
}: Readonly<{
children: React.ReactNode;
}>) => {
return (
<AntdRegistry>
<ConfigProvider
theme={{
algorithm: theme.defaultAlgorithm,
components: {
Menu: {
borderRadius: 0,
itemBorderRadius: 0,
},
},
}}>
<App style={{ height: '100%' }}>{children}</App>
</ConfigProvider>
</AntdRegistry>
);
};
export default AntdApp;