How to use next-translate-routes with I18next and withPlugins?

[fatih-koc]

We are so frustrated as a team to find out Nextjs does not offer a complete solution to handle localized slugs and they even announced that there will be no i18n in Nextjs v13 which any complete frameworks like Django or RubyonRails even Nuxt offer for years. https://github.com/vercel/next.js/discussions/18485#discussioncomment-4348848

We had shed tear and pain migrating our content heavy website which have 7 languages and 72k content. As any reasonable developer who do not wish to lose any traffic and backlink, we wanted to keep our routes as same as possible with old sitemap.

We are using i18next to handle translations and withPlugins package to handle all modification in next.config.js yet we could not figure out how to propery adjust next-translate-routes in our config.

code

our next.config.js:

// next.config.js
const path = require('path');
const withLess = require("next-with-less");
const withPlugins = require('next-compose-plugins');

const { i18n } = require('./next-i18next.config.js')

const { config } = require('process');

module.exports = withPlugins(
  [[withLess], [withBundleAnalyzer]],

  // I18N Stuff
  i18n,
)

our next-i18next.config.js:

module.exports = {
  debug: false, // It should be false

  i18n: {
    locales: ['en', 'tr', 'es', 'pt', 'fr', 'de', 'ru'],
    defaultLocale: 'en',
    localeDetection: true,

  },

  interpolation: {
    escapeValue: false
  },

}

[cvolant]

In _app:

export default withTranslateRoutes(appWithTranslation(App, nextI18nextConfig))

In getServerSideProps / getStaticProps:

return {
  props: {
    ...await serverSideTranslations(locale, namespaces, nextI18nextConfig),
  }
}