Localization prop (i18n)

Clerk offers the ability to override the strings for all of the elements in each of the Clerk Components. This allows you to provide localization for your users or change the wording to suit your brand.

@clerk/localizations

The @clerk/localizations package contains predefined localizations for the Clerk Components. We currently support:

• daDK for da-DK
• deDE for de-DE
• esES for es-ES
• frFR for fr-FR
• itIT for it-IT
• nlNL for nl-NL
• ptBR for pt-BR
• ruRU for ru-RU
• svSE for sv-SE
• enUS for en-US (default)

Usage

Install @clerk/localizations

1
npm install @clerk/localizations

Update your <ClerkProvider

1
import { ClerkProvider } from "@clerk/nextjs";
2
import { frFR } from "@clerk/localizations";
3
import type { AppProps } from "next/app";
4

5
function MyApp({ Component, pageProps }: AppProps) {
6
  return (
7
    <ClerkProvider localization={frFR} {...pageProps}>
8
      <Component {...pageProps} />
9
    </ClerkProvider>
10
  );
11
}
12

13
export default MyApp;

Custom localizations

You can also provide your own localizations for the Clerk Components. This is useful if you want to provide localization for a language that we don't currently support or if you want to change the wording to suit your brand.

Usage

1
import { ClerkProvider } from "@clerk/nextjs";
2
import type { AppProps } from "next/app";
3

4
const localization = {
5
  socialButtonsBlockButton: "Sign In with {{provider|titleize}}",
6
};
7

8
function MyApp({ Component, pageProps }: AppProps) {
9
  return (
10
    <ClerkProvider localization={localization} {...pageProps}>
11
      <Component {...pageProps} />
12
    </ClerkProvider>
13
  );
14
}
15

16
export default MyApp;

To see the full list of localizations that you can override, see our GitHub Repository.