---
title: "Internationalization in the JSS sample app for Next.js"
slug: "internationalization-in-the-jss-sample-app-for-next-js"
abstract: "How the Next.js JSS app enables internationalization"
---
# Internationalization in the JSS sample app for Next.js

A JSS Next.js application created based on the Next.js sample app comes preconfigured with the necessary settings to enable internationalization (i18n).

JSS Next.js applications support [internationalized routing](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/routing-and-page-composition-in-jss-next-js-apps.html#UUID-4389a2a5-d101-52dd-abfa-fa54e372e272_UUID-a0d91ffb-83c0-223f-b0c8-b4773d2e1bc7 "Internationalized routing in JSS Next.js apps") with sub-path routing. Domain routing requires custom implementation.

In the source directory of the Next.js JSS application, the file `next.config.js` contains definitions for the `locales` supported by the application and the `defaultLocale`:

```csharp
i18n: {
    locales: ['en', 'da-DK'],
    defaultLocale: packageConfig.language,
}

```

- `locales` are all the languages you want to support in your application and must match (or at least be a subset of) the languages defined in Sitecore. This configuration option for Next.js has some [limitations](https://nextjs.org/docs/advanced-features/i18n-routing#limits-for-the-i18n-config).
- `defaultLocale` is the locale used when visiting a path that is not prefixed by a locale. The value is set to the value you configured in the file `package.json` for the `config.language` option.

Next.js does not provide additional i18n functionality and it is not opinionated about which content translation library you must use. To enable content localization, JSS Next.js apps use the [next-localization library](https://github.com/StarpTech/next-localization). In the App component, defined in the `src/pages/_app.tsx` file, the JSS Next.js application imports the i18n provider from the `next-localization` module and initializes it using the properties `pageProps.locale`, with a value provided by Next.js, and `dictionary`, with data from the Sitecore Dictionary Services. The properties are populated by the Page Props Factory:

```csharp
function App({ Component, pageProps }: AppProps): JSX.Element {
  const { dictionary, ...rest } = pageProps;

  return (
    <I18nProvider lngDict={dictionary} locale={pageProps.locale}>
      <Component {...rest} />
    </I18nProvider>
  );
}

```

For dynamic routes, JSS Next.js apps, using an instance of the `SitecoreSitemapFetcher` class, handle the retrieval of the `locale` field when preparing the static paths for the route with the function `getStaticPaths`.

## Translating content

To translate the content of pages, you can use the `useI18n` hook. The hook provides a translation function `t` and the current language `locale`.

For example:

```csharp
import { useI18n } from 'next-localization';

const MultilingualComponent = (): JSX.Element => {
  const { t, locale } = useI18n();

  return (
    <div>
      <p>Translated text: {t('custom-key')}</p>
      <p>The current language is: {locale()}</p>
    </div>
  );
};

export default MultilingualComponent;

```