app-get-change-locale.md

Get and change the locale

You can only change the current locale from a Client Component. Export useChangeLocale and useCurrentLocale from createI18nClient, and export getCurrentLocale from createI18nServer:

// locales/client.ts
export const {
  useChangeLocale,
  useCurrentLocale,
  ...
} = createI18nClient({
  ...
})

// locales/server.ts
export const {
  getCurrentLocale,
  ...
} = createI18nServer({
  ...
})

Then use these hooks:

// Client Component
'use client'
import { useChangeLocale, useCurrentLocale } from '../../locales/client'

export default function Page() {
  const changeLocale = useChangeLocale()
  const locale = useCurrentLocale()

  return (
    <>
      <p>Current locale: {locale}</p>
      <button onClick={() => changeLocale('en')}>English</button>
      <button onClick={() => changeLocale('fr')}>French</button>
    </>
  )
}

// Server Component
import { getCurrentLocale } from '../../locales/server'

export default function Page() {
  const locale = getCurrentLocale()

  return (
    <p>Current locale: {locale}</p>
  )
}

Preserving search params

By default, next-international doesn't preserve search params when changing the locale. This is because useSearchParams() will opt-out the page from Static Rendering if you don't wrap the component in a Suspense boundary.

If you want to preserve search params, you can manually use the preserveSearchParams option inside useChangeLocale:

// Client Component
'use client'
import { useChangeLocale } from '../../locales/client'

export function ChangeLocaleButton() {
  const changeLocale = useChangeLocale({ preserveSearchParams: true })

  ...
}

Then, don't forget to wrap the component in a Suspense boundary to avoid opting out the entire page from Static Rendering:

// Client or Server Component
import { ChangeLocaleButton } from './change-locale-button'

export default function Page() {
  return (
    <Suspense>
      <ChangeLocaleButton />
    </Suspense>
  )
}

basePath support

If you have set a basePath option inside next.config.js, you'll also need to set it inside createI18nClient:

// locales/client.ts
export const {
  ...
} = createI18nClient({
  ...
}, {
  basePath: '/base'
})