1

I have a Next page that uses next-i18next in a getServerSideProps and I have another page that uses getServerSideProps to pull data from MongoDB. Both work correctly.

I would like to be able to add next-i18next to the function that connects to Mongo (basically combine the getServerSideProps functions), but I'm getting the error:

nexti18n-next Error: Initial locale argument was not passed into serverSideTranslations'

The first page's getServerSideProps function that connects to next-i18n

export const getServerSideProps = withAuthUserSSR({ whenUnauthed: AuthAction.REDIRECT_TO_LOGIN,})(async ({ locale, }) => {
return {
    props: {
        ...(await serverSideTranslations(locale,
            [
                'language-file',
                ...
            ]
        )),
    },
};

})

The getServerSideProps function in the second page that pulls data from Mongo:

export const getServerSideProps = withAuthUserSSR({ whenUnauthed: AuthAction.REDIRECT_TO_LOGIN })(async (context) => {
const username = context.params.var[0];
const userId = context.params.var[2];

const { db } = await connectToDatabase();

const pipeline = [
    ...
]

const postdata = await db.collection('posts').aggregate(pipeline).toArray();

return {
    props: {
        userId,
        username,
        postdata: JSON.parse(JSON.stringify(postdata)),
    },
};

})

Is it possible to 'add' the next-i18next code to the second function? It seems to me to be an issue with the different way 'locale' and 'context' are defined in each function. I have tried lots of combinations of both but end up messing up either the mongo query or the translations.

This is how I thought it would be done:

export const getServerSideProps = withAuthUserSSR({ whenUnauthed: AuthAction.REDIRECT_TO_LOGIN })(async (context,{ locale, }) => {
const username = context.params.var[0];
const userId = context.params.var[2];

const { db } = await connectToDatabase();

const pipeline = [
    ...
]

const postdata = await db.collection('posts').aggregate(pipeline).toArray();

return {
    props: {
        ...(await serverSideTranslations(locale,
            [
                'language-files',
                ...
            ]
        )),
        userId,
        username,
        postdata: JSON.parse(JSON.stringify(postdata)),
    },
};
})

Many thanks for any possible help!

Ray Purchase
  • 681
  • 1
  • 11
  • 37
  • 1
    `locale` comes from the `context` object, try destructuring that object inside the function rather than in its signature, i.e. `async (context)` then `const { locale } = context` inside the function. – juliomalves Dec 15 '21 at 22:44
  • Great, thank you for your help Julio. If you want to add it as an answer I will mark it as correct. – Ray Purchase Dec 16 '21 at 02:53

0 Answers0