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.

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
        }
    };
};