serverSideTranslations

When using translations inside a file inside the ‘pages' folder, the serverSideTranslations async function will need to be included. This is via either getStaticProps or getServerSideProps. The function used will depend on your situation. For pages which receive a lot of dynamic data, getServerSideProps will need to be used. Whereas, for pages which contain static data, getStaticProps can be used to speed up page load time.

An example with getStaticProps

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; export async function getStaticProps({ locale }: {locale: any}) {     return {         props: {             ...(await serverSideTranslations(locale, [             'application',             'common',             'validation'             ])),         },     } };

An example with getServerSideProps, adapted to TypeScript

import { GetServerSideProps, GetServerSidePropsContext } from 'next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; export const getServerSideProps: GetServerSideProps = async (context: GetServerSidePropsContext) => {     const { locale } = context;     let translations = {};     if (locale) {     translations = await serverSideTranslations(locale as string, ['common', 'application', 'validation']);     }     return {         props: {             ...translations         }     }; };

Operated as a Community Resource by the Open Library Foundation