diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
index 447d1e4fb..fcfbae85a 100644
--- a/apps/website/pages/_app.tsx
+++ b/apps/website/pages/_app.tsx
@@ -10,8 +10,8 @@ import { LinksSectionDetails, LinksSections } from "@/common/pagesList";
import Link from "next/link";
import StatusBadge from "@/common/StatusBadge";
import "../global-styles.css";
-import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
+import createEmotionCache from "./createEmotionCache";
type NextPageWithLayout = NextPage & {
getLayout?: (_page: ReactElement) => ReactNode;
@@ -20,9 +20,8 @@ type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};
-const clientSideEmotionCache = createCache({ key: "css", prepend: true });
-
export default function App({ Component, pageProps }: AppPropsWithLayout) {
+ const clientSideEmotionCache = createEmotionCache();
const getLayout = Component.getLayout || ((page) => page);
const componentWithLayout = getLayout();
const [renderContent, setRenderContent] = useState(false);
diff --git a/apps/website/pages/_document.tsx b/apps/website/pages/_document.tsx
index dc9777919..ad7724e58 100644
--- a/apps/website/pages/_document.tsx
+++ b/apps/website/pages/_document.tsx
@@ -1,38 +1,9 @@
-import Document, { Head, Html, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
-import React from "react";
-import createCache from "@emotion/cache";
+import createEmotionCache from "./createEmotionCache";
+import * as React from "react";
export default class MyDocument extends Document {
- static async getInitialProps(ctx: any) {
- const originalRenderPage = ctx.renderPage;
-
- const cache = createCache({ key: "css", prepend: true });
- const { extractCriticalToChunks } = createEmotionServer(cache);
-
- ctx.renderPage = () =>
- originalRenderPage({
- enhanceApp: (App: any) =>
- function EnhanceApp(props: any) {
- return ;
- },
- });
-
- const initialProps = await Document.getInitialProps(ctx);
- const emotionStyles = extractCriticalToChunks(initialProps.html);
- const emotionStyleTags = emotionStyles.styles.map((style) => (
-
- ));
-
- return {
- ...initialProps,
- styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
- };
- }
render() {
return (
@@ -45,3 +16,32 @@ export default class MyDocument extends Document {
);
}
}
+
+MyDocument.getInitialProps = async (ctx) => {
+ const originalRenderPage = ctx.renderPage;
+
+ const cache = createEmotionCache();
+ const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache);
+
+ ctx.renderPage = () =>
+ originalRenderPage({
+ enhanceApp: (App: any) =>
+ function EnhanceApp(props) {
+ return ;
+ },
+ });
+
+ const initialProps = await Document.getInitialProps(ctx);
+ const emotionChunks = extractCriticalToChunks(initialProps.html);
+ const emotionStyleTags = constructStyleTagsFromChunks(emotionChunks);
+
+ return {
+ ...initialProps,
+ styles: (
+ <>
+ {initialProps.styles}
+
+
+ ),
+ };
+};
diff --git a/apps/website/pages/createEmotionCache.ts b/apps/website/pages/createEmotionCache.ts
new file mode 100644
index 000000000..60a6f6d4d
--- /dev/null
+++ b/apps/website/pages/createEmotionCache.ts
@@ -0,0 +1,6 @@
+import createCache from "@emotion/cache";
+import type { EmotionCache } from "@emotion/utils";
+
+export default function createEmotionCache(): EmotionCache {
+ return createCache({ key: "css", prepend: true });
+}