diff --git a/frontend/src/components/LangLayout.jsx b/frontend/src/components/LangLayout.jsx
index 071ba67..e3ee3f1 100644
--- a/frontend/src/components/LangLayout.jsx
+++ b/frontend/src/components/LangLayout.jsx
@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 import { Outlet } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
 import i18n from '../i18n.js';
 import { Header } from './Header.jsx';
 import { Footer } from './Footer.jsx';
@@ -8,20 +9,19 @@ import '../styles/layout.css';
 
 export function LangLayout({ lang }) {
   const { theme, toggleTheme } = useTheme();
-
-  useEffect(() => {
-    if (i18n.language !== lang) {
-      i18n.changeLanguage(lang);
-    }
-  }, [lang]);
+  // A per-page cloned instance, not a mutation of the shared `i18n` singleton:
+  // the SSG build renders many pages concurrently in the same process
+  // (ssgOptions.concurrency), so changing the shared instance's language
+  // during render would leak between pages rendering at the same time.
+  const scopedI18n = useMemo(() => i18n.cloneInstance({ lng: lang }), [lang]);
 
   return (
-    <>
+    <I18nextProvider i18n={scopedI18n}>
       <Header lang={lang} theme={theme} onToggleTheme={toggleTheme} />
       <main>
         <Outlet />
       </main>
       <Footer />
-    </>
+    </I18nextProvider>
   );
 }