diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..4722ed5
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,15 @@
+{
+ "presets": [
+ "next/babel"
+ ],
+ "plugins": [
+ [
+ "styled-components",
+ {
+ "ssr": true,
+ "displayName": true,
+ "preprocess": false
+ }
+ ]
+ ]
+}
diff --git a/next.config.js b/next.config.js
index a843cbe..0c1f043 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,9 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
+ compiler: {
+ styledComponents: true,
+ },
}
module.exports = nextConfig
diff --git a/package.json b/package.json
index f27da74..18374c0 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
"@types/nprogress": "^0.2.0",
"@types/react": "^18.0.8",
"@types/styled-components": "^5.1.25",
+ "babel-plugin-styled-components": "^2.0.7",
"eslint": "8.14.0",
"eslint-config-next": "12.1.6",
"eslint-config-prettier": "^8.5.0",
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 5c0e6cb..05a36b0 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -5,30 +5,21 @@ import { ServerStyleSheet } from 'styled-components';
import Document, { Html, Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
- static async getInitialProps(ctx) {
- const sheet = new ServerStyleSheet();
- const originalRenderPage = ctx.renderPage;
+ // static getInitialProps({ renderPage }) {
+ // // Step 1: Create an instance of ServerStyleSheet
+ // const sheet = new ServerStyleSheet();
- try {
- ctx.renderPage = () =>
- originalRenderPage({
- enhanceApp: App => props => sheet.collectStyles()
- });
+ // // Step 2: Retrieve styles from components in the page
+ // const page = renderPage((App) => (props) =>
+ // sheet.collectStyles(),
+ // );
- const initialProps = await Document.getInitialProps(ctx);
- return {
- ...initialProps,
- styles: (
- <>
- {initialProps.styles}
- {sheet.getStyleElement()}
-
- )
- };
- } finally {
- sheet.seal();
- }
- }
+ // // Step 3: Extract the styles as