feat: added styled-components

packages/client/next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+  reactStrictMode: true,
+};
+
+export default nextConfig;

packages/client/package.json

@@ -21,7 +21,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-google-charts": "^4.0.0",
-    "styled-components": "^5.3.9",
+    "styled-components": "^6.0.2",
     "zustand": "^4.3.7"
   },
   "devDependencies": {

packages/client/pages/_document.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Document, { type DocumentContext } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext): Promise<any> {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = async () =>
+        await originalRenderPage({
+          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: [initialProps.styles, sheet.getStyleElement()],
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

packages/client/tsconfig.json

@@ -1,12 +1,18 @@
 {
   "extends": "../../tsconfig.json",
-  "files": ["../server/app.ts"],
+  "files": [
+    "../server/app.ts"
+  ],
   "compilerOptions": {
     "rootDir": "../",
     "composite": true,
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
@@ -21,14 +27,32 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
-    }
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "pages", "components", "screens", "lib", "./*"],
+  "include": [
+    "next-env.d.ts",
+    "pages",
+    "components",
+    "screens",
+    "lib",
+    "./*",
+    ".next/types/**/*.ts"
+  ],
   "references": [
     {
       "path": "./tsconfig.node.json"
     }
   ],
-  "exclude": ["node_modules", "../server/app.ts"]
+  "exclude": [
+    "node_modules",
+    "../server/app.ts"
+  ]
 }