Overview

Content SDK applications that use the Next.js Pages Router template use next-localization to provide Sitecore dictionary phrases to application components. next-localization can be replaced with next-intl in a Content SDK Next.js Pages Router application to use a maintained translation library.

This article describes how to replace next-localization with next-intl in a Content SDK Next.js Pages Router application. The migration updates the translation provider and hooks while continuing to use the dictionary data supplied through page properties.

This topic describes how to:

1. Update application dependencies.
2. Replace the translation provider.

Update application dependencies

1. In the application directory, run the following commands:

   npm uninstall next-localization
   npm install next-intl

2. Confirm that package.json lists next-intl instead of next-localization, and include the updated package-lock.json file with the application changes.

Replace the translation provider

The NextIntlClientProvider component makes the current locale and dictionary phrases available to components through next-intl.

To update src/pages/_app.tsx:

1. Find the following import:

   import { I18nProvider } from 'next-localization';

2. Replace it with the following:

   import { NextIntlClientProvider } from 'next-intl';

3. Replace the I18nProvider wrapper with NextIntlClientProvider. Pass the dictionary through the messages prop instead of lngDict, and retain the current locale expression:

   <NextIntlClientProvider
         locale={pageProps.page?.locale || scConfig.defaultLanguage}
         messages={dictionary || {}}
       >
         <Component {...rest} />
       </NextIntlClientProvider>

   
   For example, the updated _app.tsx file for the Pages Router template is:

   import { JSX } from 'react';
       import type { AppProps } from 'next/app';
       import { NextIntlClientProvider } from 'next-intl';
       import Bootstrap from 'src/Bootstrap';
       import { SitecorePageProps } from '@sitecore-content-sdk/nextjs';
       import scConfig from 'sitecore.config';
       function App({ Component, pageProps }: AppProps<SitecorePageProps>): JSX.Element {
         const { dictionary, ...rest } = pageProps;
         return (
           <>
             <Bootstrap {...pageProps} />
             <NextIntlClientProvider
               locale={pageProps.page?.locale || scConfig.defaultLanguage}
               messages={dictionary || {}}
             >
               <Component {...rest} />
             </NextIntlClientProvider>
           </>
         );
       }
       export default App;

   If dictionary keys are converted to nested objects, pass the converted dictionary to messages instead.

4. Update any comments that refer to next-localization.
5. Replace usages of the useI18n hook with the useTranslations hook from next-intl.

Note: For more details and examples, see the next-intl documentation .