diff --git a/examples/with-i18n-rosetta/lib/i18n.js b/examples/with-i18n-rosetta/lib/i18n.js
index be7f3fa08a850..7a3d5810a454e 100644
--- a/examples/with-i18n-rosetta/lib/i18n.js
+++ b/examples/with-i18n-rosetta/lib/i18n.js
@@ -14,28 +14,10 @@ export const I18nContext = createContext()
 i18n.locale(defaultLanguage)
 
 export default function I18n({ children, locale, lngDict }) {
-  const [activeDict, setActiveDict] = useState(() => lngDict)
   const activeLocaleRef = useRef(locale || defaultLanguage)
   const [, setTick] = useState(0)
   const firstRender = useRef(true)
 
-  // for initial SSR render
-  if (locale && firstRender.current === true) {
-    firstRender.current = false
-    i18n.locale(locale)
-    i18n.set(locale, activeDict)
-  }
-
-  useEffect(() => {
-    if (locale) {
-      i18n.locale(locale)
-      i18n.set(locale, activeDict)
-      activeLocaleRef.current = locale
-      // force rerender
-      setTick((tick) => tick + 1)
-    }
-  }, [locale, activeDict])
-
   const i18nWrapper = {
     activeLocale: activeLocaleRef.current,
     t: (...args) => i18n.t(...args),
@@ -44,13 +26,26 @@ export default function I18n({ children, locale, lngDict }) {
       activeLocaleRef.current = l
       if (dict) {
         i18n.set(l, dict)
-        setActiveDict(dict)
-      } else {
-        setTick((tick) => tick + 1)
       }
+      // force rerender to update view
+      setTick((tick) => tick + 1)
     },
   }
 
+  // for initial SSR render
+  if (locale && firstRender.current === true) {
+    firstRender.current = false
+    i18nWrapper.locale(locale, lngDict)
+  }
+
+  // when locale is updated
+  useEffect(() => {
+    if (locale) {
+      i18nWrapper.locale(locale, lngDict)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lngDict, locale])
+
   return (
     <I18nContext.Provider value={i18nWrapper}>{children}</I18nContext.Provider>
   )
diff --git a/examples/with-i18n-rosetta/pages/[lng]/index.js b/examples/with-i18n-rosetta/pages/[lng]/index.js
index 3be9c28225e24..5426562d75b43 100644
--- a/examples/with-i18n-rosetta/pages/[lng]/index.js
+++ b/examples/with-i18n-rosetta/pages/[lng]/index.js
@@ -19,7 +19,7 @@ const HomePage = () => {
       <h2>{i18n.t('intro.text')}</h2>
       <h3>{i18n.t('intro.description')}</h3>
       <div>Current locale: {i18n.activeLocale}</div>
-      <Link href="/de">
+      <Link href="/[lng]" as="/de">
         <a>Use client-side routing to change language to 'de'</a>
       </Link>
     </div>