[Solved] Next.js and next-i18next translation not working

I worked on an app and deployed it to Vercel. During development everything worked fine including translations. After deploying app to Vercel, translations didn’t work at all.

Update pages/_app.js and use serverSideTranslations as shown below.

• pages/_app.js

// Filename pages/_app.js

import { appWithTranslation } from 'next-i18next'

import '../public/app.css'
import '../public/login.css'

function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export const getServerSideProps = async ({ locale }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common', 'login'], null, ['en', 'ja'])),
  },
})

export default appWithTranslation(App)

Update next-i18next.config.js file and update localePath with path.resolve to static locale files.

// Filename: next-i18next.config.js

const path = require('path')

module.exports = {
  // Enable below debug flag to debug translation issue
  ...
  localePath: path.resolve('./public/locales'),
  localeStructure: '{{lng}}/{{ns}}',
  ...
}

After these changes and deployed to Vercel, translations worked fine. The change that did the trick is the update on localePath.