Whole page gets re-mounted after a locale change? #723

nikola1970 · 2023-12-14T17:31:21Z

nikola1970
Dec 14, 2023

Hello, so everything looks to work fine besides that whenever I switch locale whole page gets re-mounted (very short blank flash) for some reason.

I am consuming all my translations client side.

App structure is like this:
app/[locale]/layout.tsx etc, so all pages are nested inside locale folder.

My [locale]/layout.tsx looks like this:

export default function RootLayout({
  children,
  params: { locale = 'de' },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const messages = useMessages();

  if (!LOCALES.includes(locale as any)) {
    notFound();
  }

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          <RootProviders>{children}</RootProviders>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

My navigation utils file is this:

export const { Link, redirect, useRouter } = createSharedPathnamesNavigation({
  locales: LOCALES,
});

And middleware is like this:

export default createMiddleware({
  locales: LOCALES,
  defaultLocale: 'de',
});

export const config = {
  // Skip all paths that should not be internationalized. This example skips
  // certain folders and all pathnames with a dot (e.g. favicon.ico)
  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'],
};

When using the link provided by createSharedPathnamesNavigation, it triggers a full-page reload. Because of this, I utilize the next/navigation link with appropriate linking to switch the language, and that works fine without hard-refreshing the page.

The only issue I encounter is that the page gets re-mounted upon any locale switch. For instance, if I have a form with input fields, and some of them are filled, switching the locale causes everything to be lost because the entire page is being remounted.

Any ideas? :) Thanks a lot!

amannn · 2024-02-15T13:13:55Z

amannn
Feb 15, 2024
Maintainer

Next.js remounting the page on locale change is expected since this is essentially a navigation to another page (see e.g. vercel/next.js#44793).

If you want to persist some state between navigation, you need to move it out of the local state of a component that gets remounted (e.g. to a context value that is rendered from the root layout).

1 reply

niksimFS24 Feb 15, 2024

Thanks for the feedback. Will take a look :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Whole page gets re-mounted after a locale change? #723

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Whole page gets re-mounted after a locale change? #723

nikola1970 Dec 14, 2023

Replies: 1 comment · 1 reply

amannn Feb 15, 2024 Maintainer

niksimFS24 Feb 15, 2024

nikola1970
Dec 14, 2023

Replies: 1 comment 1 reply

amannn
Feb 15, 2024
Maintainer