diff --git a/apps/user/next.config.js b/apps/user/next.config.js index c8cd5d95a..577fd1d88 100644 --- a/apps/user/next.config.js +++ b/apps/user/next.config.js @@ -1,4 +1,7 @@ /** @type {import('next').NextConfig} */ module.exports = { transpilePackages: ['@maru/ui'], + compiler: { + styledComponents: true, + }, }; diff --git a/apps/user/src/app/layout.tsx b/apps/user/src/app/layout.tsx index 62060e387..f0ed98307 100644 --- a/apps/user/src/app/layout.tsx +++ b/apps/user/src/app/layout.tsx @@ -1,4 +1,5 @@ import Provider from '@/components/Provider'; +import StyledComponentsRegistry from '@/lib/registry'; import QueryClientProvider from '@/services/QueryClientProvider'; import Script from 'next/script'; import { ReactNode } from 'react'; @@ -30,9 +31,11 @@ const Layout = ({ children }: Props) => { - - {children} - + + + {children} + + ); diff --git a/apps/user/src/lib/registry.tsx b/apps/user/src/lib/registry.tsx new file mode 100644 index 000000000..af5a25e7d --- /dev/null +++ b/apps/user/src/lib/registry.tsx @@ -0,0 +1,29 @@ +'use client'; + +import { useServerInsertedHTML } from 'next/navigation'; +import { ReactNode, useState } from 'react'; +import { ServerStyleSheet, StyleSheetManager } from 'styled-components'; + +interface Props { + children: ReactNode; +} + +const StyledComponentsRegistry = ({ children }: Props) => { + const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()); + + useServerInsertedHTML(() => { + const styles = styledComponentsStyleSheet.getStyleElement(); + styledComponentsStyleSheet.instance.clearTag(); + return <>{styles}; + }); + + if (typeof window !== 'undefined') return <>{children}; + + return ( + + {children} + + ); +}; + +export default StyledComponentsRegistry;