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
...
| Code Block |
|---|
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
...
| Code Block |
|---|
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
}
};
}; |