ERR_TOO_MANY_REDIRECTS on vercel after deploying Nextjs App

Question

I deployed my nextjs app to Vercel and it was a success.

I can see a preview of the website and even the log saying it works well.

But i try to access the website via the default Vercel domain :

https://tly-nextjs.vercel.app/

I get an ERR_TOO_MANY_REDIRECTS.

I do not have this problem locally.

I tried :

• Disabling a language redirect that I use (/en for english folks, and / for french people).
• Disabling the language detector of i18next.

But none of these solutions changed anything. Any ideas ?

i18n.js file

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Cache from 'i18next-localstorage-cache';
import LanguageDetector from 'i18next-browser-languagedetector';



const fallbackLng = ['fr']; 
const availableLanguages = ['fr', 'en'];

const en = require('./locales/en/common.json');
const fr = require('./locales/fr/common.json');

const options = {
  order: ['querystring', 'navigator'],
  lookupQuerystring: 'lng'
}

const cacheOptions = {
  // turn on or off
  enabled: true,

  // prefix for stored languages
  prefix: 'i18next_res_',

  // expiration
  expirationTime: 365*24*60*60*1000,

  // language versions
  //versions: {}
}

i18n
  .use(Cache)
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    cache: cacheOptions,
    fallbackLng: fallbackLng,
    debug: true,
    detection: options,
    supportedLngs: availableLanguages,
    nonExplicitSupportedLngs: true,
    resources: {
      en: {translation: en},
      fr: {translation: fr},
    },
    interpolation: {
      escapeValue: false,
    },
    react: {
      wait: true,
      useSuspense: true,
    },
  });


export default i18n;

My change Language function :

const changeLanguageInHouse = (lang, bool) => {
    setLoading(true);

    i18next.changeLanguage(lang).then((t) => {
      setLanguage(lang);
      bake_cookie("langChoice", lang);
      setLoading(false);

      if (bool === true) {
        var newUrl2 = (lang === "fr" ? "" : "/en") + asPath;

        window.location.replace(newUrl2);
      }
    });
  };

Answer 1

I changed all my getInitialProps to getServerSideProps

and realised I was doing a redirect on response :

res.writeHead(301, { Location: "/" })

I just delete it. And now I don't have this endless redirect.