Check the basic next-themes setup

Add suppressHydrationWarning
app/layout.tsx
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>

I already have that, and it flicker/flash

Try disabling the forced re-render on lang switch, don’t call router.refresh() manually when changing the locale

also check your middleware, if middleware.ts rewrites the URL or headers when switching locales, that can trigger a full SSR render

Middleware is no more a thing since a long time

How is your theme read on the server for the initial render? Do you send it in a cookie? Does the theme flicker happens when you first visit the page as well?

Maybe this is not the case here, but my thought is that your theme is not available on the server for the first render so the flicker happens. And assuming your language switch causes a server render the flicker is present every time the language is switched. Again, maybe it's not the case here, but that's what I can think of, so maybe check that as well.

Hey there, good day and thank you for looking into it.

* REPO LINK WITH FULL CODE: https://github.com/manuel-stirone/for-reddit/tree/main
* DEPLOYED LINK SO IT GIVES A BETTER IDEA OF THE ISSUE: https://for-reddit.vercel.app/en

I am fairly new to NEXT, still studying it, so it can be a little bit messy.
I tried with different locale switcher, as you can see, I also tried supressing hydrate and many other things, but does not look like I can get it to work properly

is present every time the language is switched

Sometimes it flashes, other times it doesn't. It's not 100% of the times, I would say a 80%? You can check the vercel link to see it's not constant

Ok, so I looked up what next-theme is doing and looks like it doesn't rely on cookies at all. It doesn't read the theme server side but rather uses a small script to read the theme from local storage after the page is loaded on the client, but it does it before anything else renders so you never see a flicker when the site is loaded.

But that still doesn't explain why it flickers when the language is changed though. I'll share if I am able to figure it out.

Thanks a lot for looking into that
Hope I can find a solution, it's kinda crappy if it flashes every time

I looked at your project. Unfortunately, if you want to change the page URL, you will always see a transition in Next.js. The only solution I can think of is not changing the page URL and dynamically loading the content instead.

ThemeProvider is inside [locale] layout, so it remounts on every locale change, you can just move ThemeProvider to app/layout.tsx, keep [locale]/layout.tsx only for NextIntlClientProvider logic.
i tried it myself locally

But the problem is that Next.js will still reload [locale]/layout.tsx when navigating between /en and /it, because those are different route segments

yeah the [locale]/layout.tsx will reload but to avoid theme flashing the themeProvider must persist

If anyone manages to implement this solution, please share it so we can take a look, it would be very interesting

I'll try it when I am at home and let you know

Thanks a lot for looking into that

@Silky antThat fixed the issue, thanks a lot!

It works, that was insightful, thank you!

no problem u can right click on the reply and mark it as solution