hotfix: hydration errors

developertools-tech · Jan 12, 2024 · ef58cd1 · ef58cd1
1 parent a3bd8e5
commit ef58cd1
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -18,6 +18,7 @@ import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -124,7 +125,7 @@ function LanguageToggle() {
   );
 }
 
-export default function Layout({
+function Layout({
   title,
   children,
 }: {
@@ -558,3 +559,8 @@ export default function Layout({
     </Box>
   );
 }
+
+const NoSSRLayout = dynamic(() => Promise.resolve(Layout), {
+  ssr: false,
+});
+export default NoSSRLayout;
diff --git a/data/sponsors.ts b/data/sponsors.ts
@@ -1,11 +1,11 @@
-import idyllicDigital from '../resources/sponsors/idyllic-digital.png';
+// import idyllicDigital from '../resources/sponsors/idyllic-digital.png';
 
-const sponsors = [
-  {
-    title: 'Idyllic Digital',
-    logo: idyllicDigital,
-    link: 'https://www.facebook.com/IdyllicDigitalServices/',
-  },
-];
+export type Sponsor = {
+  title: string;
+  logo: string;
+  link: string;
+};
+
+const sponsors: Sponsor[] = [];
 
 export default sponsors;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -7,6 +7,7 @@ import '../styles/globals.css';
 import { CacheProvider, EmotionCache } from '@emotion/react';
 import { createTheme, CssBaseline, ThemeProvider } from '@mui/material';
 import type { AppProps } from 'next/app';
+import Head from 'next/head';
 import { appWithTranslation } from 'next-i18next';
 import React from 'react';
 
@@ -29,12 +30,20 @@ function MyApp(props: MyAppProps) {
   } = props;
 
   return (
-    <CacheProvider value={emotionCache}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <Component {...pageProps} />
-      </ThemeProvider>
-    </CacheProvider>
+    <>
+      <Head>
+        <meta
+          name='viewport'
+          content='initial-scale=1, width=device-width'
+        />
+      </Head>
+      <CacheProvider value={emotionCache}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Component {...pageProps} />
+        </ThemeProvider>
+      </CacheProvider>
+    </>
   );
 }
 

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -10,10 +10,6 @@ export default class MyDocument extends Document {
     return (
       <Html lang='en'>
         <Head>
-          <meta
-            name='viewport'
-            content='initial-scale=1, width=device-width'
-          />
           <link
             rel='icon'
             href='/favicon.ico?v=2'