or refresh about page

does it have something to do with useTranslation?

when i use router.push to go to the About page everything works fine
but when i try to refresh the about page it gives me a hydration error
does that explain something?

I'm not seeing enough in your code to figure it out

How does change_locale.png get rendered?

You should try and set your default locale to english unless some sort of cookie is provided to specify another language I think. (on your server/backend)

It seem's like the Next server is SSR'ing your app with no locale then when the client hydrates your getting the english image

LMK if you need anything. DM's are open

this is the english translation located in public/locales/en

thank u

in the language switcher the change_locale.png is located

lmk if u need anything else

im getting the same error in another page also
but the rest works fine

are you rendering new Date().toLocaleString() anywhere?

nope

the only thing changing is the navbar order

but its working fine on all of the pages

besides about page

and one other

if u need any more info lmk

cz im tired of looking at the same code for 2 days

lmao i feel you

wait

i stopped getting the error

when i removed these components from the _app

but only in the about page

okay so

in which file are you using the "assets/english.png"

?

the hydration error is caused by the "src" attribute of the image

which changes during rendering

how can i fix it

one sec

i've changed the src attribute to a string =

'use client'
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import Link from 'next/link';

export default function LanguageSwitcher() {
    const { t } = useTranslation('common');
    const router = useRouter();
    const imageName = t('change_locale');
    const imagePath = `/assets/${imageName}.png`;

    const toggleLocale = () => {
        const newLocale = router.locale === 'fr' ? 'en' : 'fr';
        const currentPathname = router.pathname + window.location.search;
        router.push(currentPathname, undefined, { locale: newLocale });
    };

    return (
        <Link href={router.asPath} locale={router.locale === 'fr' ? 'en' : 'fr'}>
            <button onClick={toggleLocale}><img src="assets/english.png" className='h-4 w-6' /></button>
        </Link>
    );
}

this is just a test to see if there aren't any other hydration errors, run it and lemme know

now im getting a different error

it has nothing to do with the navbar

haha jeez, it seems to be coming from your footer now

even when i remove the footer

i get a similar error

in another page

its because of how translation works or something

i have no idea how it works

that why idk where to look

Ya I understand, it's because you aren't making use of useEffect properly

you have to start implementing useEffect and useState in all the components where the variables are changing and need re-renders

otherwise you will keep on getting the hydration errors if you try to manipulate the dom directly

can u tell me what im doing wrong with useEffect

do u see anything wrong in this

because in the index page

everything works as it should

im getting the error only on these two pages

well there are many things, for the first example you were trying to change the imagePath variable during render which was causing the hydration error,

The second error seems to be coming from the footer where the text content of the privacy policy is changing during render which is causing the client to have a different version than the server

one sec

@Atlantic herring i figured you haven't set up the library you are using properly as you are importing useTranslation from next-i18next.

Follow the example below to configure it properly:

https://github.com/i18next/next-13-app-dir-i18next-example/tree/main

alright ill look into it

i think i found the solution

tx

no probs

@Atlantic herring what solution you got i too want to know . i am also facing same hydration error with language translation in one of project

disabling ssr @Golden northern bumble bee

@Atlantic herring we can do that i tried but it not worked and also one more question is there blink on page refresh

@Atlantic herring like in my project default language was German and we refresh page it works fine but when change language to english and refresh page there is ssr error and there is blink on screen page first load with default language then reload with english

no im not facing that issue

@Atlantic herring can you share code relevant with functionality or how you implmented

this is a bad solution

but it works for now

@Atlantic herring thanks

thank @Northeast Congo Lion

@Atlantic herring useEffect(() => {
// Update meta tags on language change
i18n.changeLanguage(router.locale);

setIsClient(true);
}, [router.locale]); its fine we can do this we are not rendering anything until component is mounted and language changes

@Siberian its very frustrating to use i18n with next.js 13 app router and its very challenging to do language translation without changing routes