I did config styled-components in my nextjs projects sometimes the style it works and sometimes when i refresh the page it doesn't work how to fix this ?
/* registry.jsx */
'use client';
import React, { useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
export default function StyledComponentsRegistry({
children,
}) {
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>
);
}
/* document.js */
import { Head, Html, Main, NextScript } from "next/document";
import StyledComponentsRegistry from "../../libs/registry";
export default function Document() {
return (
<Html lang="en">
<Head />`your text`
<StyledComponentsRegistry>
<body>
<Main />
<NextScript />
</body>
</StyledComponentsRegistry>
</Html>
);
}
this is the code that i have configured what i'm missing ?