🐛 fix: hydration error caused by nest html

2026-06-14 11:40:07 +00:00 · 2025-04-21 19:05:43 +08:00
2 changed files with 31 additions and 38 deletions
@@ -1,11 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-const Layout = ({ children }: PropsWithChildren) => {
-  return (
-    <html>
-      <body>{children}</body>
-    </html>
-  );
-};
-
-export default Layout;
@@ -12,33 +12,37 @@ import { MAX_WIDTH } from '@/const/layoutTokens';
 const NotFound = memo(() => {
  const { t } = useTranslation('error');
  return (
-    <Flexbox align={'center'} justify={'center'} style={{ minHeight: '100%', width: '100%' }}>
-      <h1
-        style={{
-          filter: 'blur(8px)',
-          fontSize: `min(${MAX_WIDTH / 3}px, 50vw)`,
-          fontWeight: 'bolder',
-          margin: 0,
-          opacity: 0.12,
-          position: 'absolute',
-          zIndex: 0,
-        }}
-      >
-        404
-      </h1>
-      <FluentEmoji emoji={'👀'} size={64} />
-      <h2 style={{ fontWeight: 'bold', marginTop: '1em', textAlign: 'center' }}>
-        {t('notFound.title')}
-      </h2>
-      <p style={{ lineHeight: '1.8', marginBottom: '2em' }}>
-        {t('notFound.desc')}
-        <br />
-        <div style={{ textAlign: 'center' }}>{t('notFound.check')}</div>
-      </p>
-      <Link href="/">
-        <Button type={'primary'}>{t('notFound.backHome')}</Button>
-      </Link>
-    </Flexbox>
+    <html>
+      <body>
+        <Flexbox align={'center'} justify={'center'} style={{ minHeight: '100%', width: '100%' }}>
+          <h1
+            style={{
+              filter: 'blur(8px)',
+              fontSize: `min(${MAX_WIDTH / 3}px, 50vw)`,
+              fontWeight: 'bolder',
+              margin: 0,
+              opacity: 0.12,
+              position: 'absolute',
+              zIndex: 0,
+            }}
+          >
+            404
+          </h1>
+          <FluentEmoji emoji={'👀'} size={64} />
+          <h2 style={{ fontWeight: 'bold', marginTop: '1em', textAlign: 'center' }}>
+            {t('notFound.title')}
+          </h2>
+          <p style={{ lineHeight: '1.8', marginBottom: '2em' }}>
+            {t('notFound.desc')}
+            <br />
+            <div style={{ textAlign: 'center' }}>{t('notFound.check')}</div>
+          </p>
+          <Link href="/">
+            <Button type={'primary'}>{t('notFound.backHome')}</Button>
+          </Link>
+        </Flexbox>
+      </body>
+    </html>
  );
 });