Feedback for “Get and change the locale”

[ArtemPedenko]

query params in my url disappear when i change locale like:

before: localhost:3000/en/ea-sports-fc-24?id=05ae92c0bda14ba788114e87ca5af446&namespace=4750c68b2bfa4f43933b81cfd5cc510c

after: http://localhost:3000/ea-sports-fc-24

my link look like this: <Link href={{ pathname:${productLink}, query: { id:${item.offer.id}, namespace:${item.offer.namespace}`, }, }}

` and i use next.js app router

[gustaveWPM]

Hello! Indeed, there is a "preserveSearchParams" option to pass to useChangeLocale. (Maybe this is not documented yet, Next International has undergone some changes recently.)

Probs something like: useChangeLocale({preserveSearchParams: true})

[ArtemPedenko]

I get this query params from server page. useSearchParams used in client components only

[ArtemPedenko]

My page look like this `const ProductPage = async ({ searchParams, params }) => { const t = await getI18n(); console.log(searchParams); //some code };

export default ProductPage;`

I cahenge language in client component and use this:

import { useChangeLocale } from "@/locales/client"; const changeLocale = useChangeLocale();

<LanguageButton onClick={() => changeLocale("en")}> ENGLISH </LanguageButton>

I think i need thing like useSearchParams with suspense, but for server component. but I didn’t find whether there is such a thing or not. That's why now i put this params in url and its look like "page1/id/namespace"

[QuiiBz]

I cahenge language in client component and use this:

import { useChangeLocale } from "@/locales/client"; const changeLocale = useChangeLocale();

The issue is that you're not using the preserveSearchParams option inside useChangeLocale():

const changelocale = useChangeLocale({ preserveSearchParams: true })

You'll also need to wrap the component using this hook in a Suspense boundary. See the documentation here: https://next-international.vercel.app/docs/app-get-change-locale#preserving-search-params

[ArtemPedenko]

I make like you say const changeLocale = useChangeLocale({ preserveSearchParams: true });

and to my Layout

`"use client";
import { ReactElement, Suspense } from "react";
import { I18nProviderClient } from "../../locales/client";
import Header from "./modules/Header";
import HeaderSticky from "./modules/HeaderSticky";
import Footer from "./modules/Footer";
import { Providers } from "../store/provider";

export default function SubLayout({
  children,
  params,
}: {
  children: ReactElement;
  params: { locale: string };
}) {
  return (
    <Providers>
      <I18nProviderClient locale={params.locale}>
        <Suspense>
          <Header />
          <HeaderSticky />
          {children}
          <Footer />
        </Suspense>
      </I18nProviderClient>
    </Providers>
  );
}`

And its still not work

[QuiiBz]

Please send a minimal reproduction, so we can debug further. It works as expected in https://github.com/QuiiBz/next-international/tree/main/examples/next-app

[ArtemPedenko]

i copy my repo on stackblitz (https://stackblitz.com/edit/github-83o5jz?file=app%2F[locale]%2Flayout.tsx)

Here link to page with params.

Suspense in app/[locale]/layout.tsx useChangeLocale in app/[locale]/modules/Header/LanguageModal.tsx Page when i need query params in app/[locale]/[...product]/page.tsx

you can change locale in this modal

[QuiiBz]

Thanks for the reproduction. You're not using the version that introduced this preserveSearchParams option (1.1.0). Please update to at least 1.1.0, and even better 1.1.2 which is currently the latest.