examples: fix next-translate prod hydration error in layout (#52653)

Co-authored-by: Lee Robinson <me@leerob.io>
vercel · Aug 15, 2024 · 2865e18 · 2865e18
1 parent 1bf2b74
commit 2865e18
Showing 1 changed file with 24 additions and 18 deletions.
diff --git a/examples/with-next-translate/app/layout.js b/examples/with-next-translate/app/layout.js
@@ -6,25 +6,31 @@ export const metadata = {
 };
 
 export default function Layout(props) {
-  const { t } = useTranslation();
+  const { t, lang } = useTranslation();
 
   return (
-    <div className="container">
-      {props.children}
-      <footer>
-        <span>{t("common:powered")} </span>
-        <a href="https://vercel.com" target="_blank" rel="noopener noreferrer">
-          ▲ vercel
-        </a>
-        <span>&amp;</span>
-        <a
-          href="https://github.com/vinissimus/next-translate"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          next-translate
-        </a>
-      </footer>
-    </div>
+    <html lang={lang}>
+      <body className="container">
+        {props.children}
+        <footer>
+          <span>{t("common:powered")} </span>
+          <a
+            href="https://vercel.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            ▲ Vercel
+          </a>
+          <span>&amp;</span>
+          <a
+            href="https://github.com/vinissimus/next-translate"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            next-translate
+          </a>
+        </footer>
+      </body>
+    </html>
   );
 }