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