build: add styled-components settings with next

Mornieur · Sep 3, 2023 · 9e448b2 · 9e448b2
1 parent b8abdeb
commit 9e448b2
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git a/lib/registry.tsx b/lib/registry.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { useServerInsertedHTML } from 'next/navigation';
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styleTags = styledComponentsStyleSheet.getStyleTags();
+    return <>{styleTags}</>;
+  });
+
+  if (typeof window !== 'undefined') return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet}>
+      {children}
+    </StyleSheetManager>
+  );
+}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,13 +1,19 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+import StyledComponentsRegistry from '../../lib/registry';
 
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <StyledComponentsRegistry>
+            <Main />
+          </StyledComponentsRegistry>
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
 }