How to manage i18n routing in next.js to use slash instead of dash

user_5900197 0
Viewed 879

I have a website that have multiple countries and each country has more than one locale here is my next-i18next.config.js

module.exports = {
  i18n: {
    defaultLocale: 'en-eg',
    locales: ['en-br', 'en-eg', 'en-ke', 'pt-br', 'pt-eg', 'pt-ke', 'en', 'pt'],
    localeDetection: false,
  },
  lowerCaseLng: true,
  fallbackLng: {
    'en-br': ['en'],
    'en-eg': ['en'],
    'en-ke': ['en'],
    'pt-br': ['pt'],
    'pt-eg': ['pt'],
    'pt-ke': ['pt'],
  },
};

the desired behavior instead of /{language}-{country}/:path to be {country}/{language/:path I wonder is it possible to achieve?

next-i18next i18next next.js
1 Answers

You can use rewrites in next.config.js to map the desired URL format to a different destination path that actually exists.

//next.config.js

module.exports = {
    async rewrites() {
        return [
            // Add an entry for each locale that needs to be mapped
            {
                source: '/br/pt/:path*',
                destination: '/pt-br/:path*'
            },
            // Other locales rewrites here
        ]
    }
}
user_18707800
Related