CODEWITHSUNDEEP
internationalizationnext.jsi18nextvercel
Ali Chahat
Ali Chahat

Reputation: 165

ERR_TOO_MANY_REDIRECTS on vercel after deploying Nextjs App

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 :

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);
      }
    });
  };

Upvotes: 1

Views: 12098

Answers (5)

firoz3130
firoz3130

Reputation: 21

To fix the issue, you need to set the "SSL/TLS" option in Cloudflare to "Full".

Upvotes: 2

Sankalp Mukim
Sankalp Mukim

Reputation: 80

Doing this worked for me... https://vercel.com/guides/resolve-err-too-many-redirects-when-using-cloudflare-proxy-with-vercel

I think it's the actual solution to the cause of the problem rather than a bandage!

Upvotes: -1

Ali Chahat
Ali Chahat

Reputation: 165

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.

Upvotes: 0

Bram Dcpr
Bram Dcpr

Reputation: 1

Is there a public repo available for this? Here is how it worked for me.

Try changing the order of the locales and the default locale (not sure this helps, but it changed something for me. Undocumented if that is the case!) So I put the default locale first (which is nl for me) in both the locales array and the domains array.

Let me know if that helps!

module.exports = {
  i18n: {
    localeDetection: false,
    // These are all the locales you want to support in
    // your application
    locales: ['nl', 'en'],
    // This is the default locale you want to be used when visiting
    // a non-locale prefixed path e.g. `/hello`
    defaultLocale: 'nl',
    // This is a list of locale domains and the default locale they
    // should handle (these are only required when setting up domain routing)
    domains: [
      {
        domain: 'example.be',
        defaultLocale: 'nl',
      },
      {
        domain: 'example.com',
        defaultLocale: 'en',
      },
    ],
  },
  trailingSlash: true,
};

Upvotes: 0

suther
suther

Reputation: 13578

What happend at your server is following:

You enter https://tly-nextjs.vercel.app/ and it is redirected to /en with HTTP-Status-Code 307 (Temporary Redirect).

And /en redirect with 301 (Permanent Redirect) to /.

You can reproduce this by open the Browser-Dev-Tools and have a look at the Network Tab.

It might be, that you have some kind of url-rewriting activated at your server, which redirect everything to your domain-root.

Upvotes: 2

Related Questions