Using Next.js i18n with JSS
Next.js provides a way to use Internationalized Routing. The sample app is using Sub-path Routing.
Domain routing requires custom implementation.
Let's dive into details on how the sample app enables i18n
.
jss export
doesn't support multilingual apps, in this case you should disable localization. Refer to page.
Initialization
The file next.config.js
contains definitions for locales
and defaultLocale
:
locales
are all the locales you want to support in your application and should generally match (at least be a subset of) those in Sitecore.defaultLocale
is the locale used when visiting a non-locale prefixed path, such as/styleguide
. It'sconfig.language
from yourpackage.json
file.
i18n: {
locales: ['en', 'da-DK'],
defaultLocale: packageConfig.language,
}
Next.js does not provide anything for localization, only i18n routing. To enable localization, the sample app uses the next-localization library.
NOTE: If your app is not multilingual, you can remove
next-localization
and references to it.
In src/pages/_app.tsx
, the App
initializes using I18nProvider
with properties populated in src/lib/page-props-factory.ts
:
pageProps.locale
- provided by nextjs.dictionary
- fetched fromDictionaryService
.
function App({ Component, pageProps }: AppProps): JSX.Element {
const { dictionary, ...rest } = pageProps;
return (
<I18nProvider lngDict={dictionary} locale={pageProps.locale}>
<Component {...rest} />
</I18nProvider>
);
}
Read more about accessing locale information.
If you have dynamic pages, you should return the locale
field in getStaticPaths
. Read more about Dynamic getStaticProps Pages.
By default, SitecoreSitemapFetcher
handles this case.
Translation
To use translation, you need to leverage the useI18n
hook:
t
- translation function.locale
- current language.
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;
Look at the component Styleguide-Multilingual for an example of using next-localization
and Next.js i18n routing
.