Next.js Discord

Discord Forum

Looping problem in translation and route management

Unanswered
Satin posted this in #help-forum
Open in Discord
SatinOP
Hello guys i am trying to update my node version from 14.x to 18.x. After i updated i had some issues then i fixed that but now i have problem in the routing management. As you can see the preview links below there is a bug like a loop. How can i fix that?

if i give url with kebab-case like tablet-menu i have looping problem some how. But with camel case usage i dont have any problem for all my pages.

https://finedine-website-dxxjddb21-finedine.vercel.app/en-tr/tablet-menu
https://finedine-website-dxxjddb21-finedine.vercel.app/en-tr/tabletMenu

5 Replies

SatinOP
This is my next.config.js 

const nextTranslate = require('next-translate');

const securityHeaders = [
  {
    key: 'Referrer-Policy',
    value: 'origin-when-cross-origin',
  },
];

const localeSubpaths = {
  'en-us': 'en-us',
  'en-gb': 'en-gb',
  'en-ae': 'en-ae',
  'en-tr': 'en-tr',
  'en-de': 'en-de',
  'en-ph': 'en-ph',
  'en-jo': 'en-jo',
  'en-mx': 'en-mx',
  'en-eg': 'en-eg',
  'en-fr': 'en-fr',
  'en-es': 'en-es',
  'tr-tr': 'tr-tr',
  'ar-ae': 'ar-ae',
  'ar-jo': 'ar-jo',
  'ar-eg': 'ar-eg',
  'de-de': 'de-de',
  'fr-fr': 'fr-fr',
  'es-es': 'es-es',
  'es-mx': 'es-mx',
  'fil-ph': 'fil-ph',
  'en-za': 'en-za',
};
module.exports = nextTranslate({
  publicRuntimeConfig: {
    localeSubpaths,
  },
  i18n: {
    localeDetection: false,
  },
  webpack(config, options) {
    config.resolve.modules.push(__dirname);
    return config;
  },
  future: {
    webpack5: true,
  },
  async rewrites() {
    return [
      {
        source: '/',
        destination: '/',
      },
      {
        source: '/demo-request',
        destination: '/bookDemo',
      },
      {
        source: '/book-demo',
        destination: '/bookDemo',
      },
      {
        source: '/thank-you',
        destination: '/thankYou',
      },
      {
        source: '/dine-in-ordering',
        destination: '/dineInOrdering',
      },
      {
        source: '/become-reseller',
        destination: '/becomeReseller',
      },
      {
        source: '/become-affiliate',
        destination: '/becomeAffiliate',
      },
      {
        source: '/become-partner',
        destination: '/becomePartner',
      },
      {
        source: '/privacy-and-terms',
        destination: '/privacyAndTerms',
      },
   
      {
        source: '/fast-checkout',
        destination: '/fastCheckout',
      },
      {
        source: '/order-and-pay',
        destination: '/dineInQR',
      },
      {
        source: '/dine-in-qr-menu',
        destination: '/dineInQR',
      },
      {
        source: '/tablet-menu',
        destination: '/tabletMenu',
      },
      {
        source: '/delivery-pick-up-menu',
        destination: '/deliveryPickUp',
      },
    
    ];
  },
  async headers() {
    return [
      {
        source: '/:path*',
        headers: securityHeaders,
      },
    ];
  },
});
and this is my i18n.js file:

module.exports = {
  locales: [
    'en-us',
    'en-gb',
    'en-ae',
    'en-tr',
    'en-de',
    'en-jo',
    'en-ph',
    'en-mx',
    'en-eg',
    'en-fr',
    'en-es',
    'tr-tr',
    'ar-ae',
    'ar-jo',
    'ar-eg',
    'de-de',
    'fr-fr',
    'es-es',
    'es-mx',

    // PH
    'fil-ph',

    //ZA
    'en-za',
  ],
  defaultLocale: 'en-us',
  localeDetection: false,
  pages: {
    '*': ['common', 'metaTags'],
    '/foodTruck': ['foodTruck'],
    '/': ['home'],
    '/tabletMenu': ['tabletMenu'],
    '/deliveryPickUp': ['deliveryPickup'],
    '/dineInQR': ['dineInQR'],
    '/fastCheckout': ['fastCheckout'],
    '/pricing': ['pricing'],
    '/litePlan': ['litePlan'],
    '/enterprise': ['businessTypeEnterprise'],
    '/ghostKitchen': ['businessTypeGhostKitchen'],
    '/becomeAffiliate': ['referralProgram'],
  },
  loadLocaleFrom: (lang, ns) =>
    // You can use a dynamic import, fetch, whatever. You should
    // return a Promise with the JSON file.
    import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
};
SatinOP
any ideas?
SatinOP
in my website project i am using next.js 12.2 v and i am using next-translate for managing multiple languages. Also I have logic for kebab-case urls to rewrite as camel case. I believe, there is a problem in the middleware redirection logic to affect on my next-translate and some how i could not get translations in the kebab-case urls. I have only translations' keys on the page. I have been trying to fix that but even if i understand the problem i couldnt fix it yet. Is there anyone who can help me on this? I could share the code but we need to debug on the vercel preview logs.