Using http instead of https locally with localized domains

[eiskalteschatten]

What version of Next.js are you using?

10.2

What version of Node.js are you using?

14.16.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

I have a Next.js application that uses two different domains for different languages. English uses .com and German uses .de. When I upgraded to Next.js 10, I rewrote the entire mechanism to use the built-in localization feature that supports multiple domains out of the box which is absolutely awesome and works like a charm in production.

However, I have had problems locally with development since then. When I click on a link, it automatically redirects to https which I am not using for development which of course leads to the browser not being able to connect to the page. I use the following domains for local development which, of course, are set up in /etc/hosts:

127.0.0.1       en.localhost
127.0.0.1       de.localhost

Of course, I can access the application over localhost without the subdomain and the links work perfectly fine, but then I have no way to distinguish between the languages for development. Anyone have any suggestions on how to work around this? Is this a bug that I should report?

Expected Behavior

I expect to be able to disable https for local development regardless of the domain. Perhaps it would be a good idea to make it settable in the next.config.js file or as an env variable.

To Reproduce

1. Create a Next.js application
2. Set up multiple locales using multiple domains as described in the docs: https://nextjs.org/docs/advanced-features/i18n-routing#locale-strategies
3. Add domains for local development with a config similar to this:

domains: [
  {
    domain: process.env.NODE_ENV === 'development' ? 'en.localhost' : 'somedomain.com',
    defaultLocale: 'en',
  },
  {
    domain: process.env.NODE_ENV === 'development' ? 'de.localhost' : 'irgendeinedomain.de'
    defaultLocale: 'de',
  }
]

4. Add the local domains to your hosts file:

127.0.0.1       en.localhost
127.0.0.1       de.localhost

5. Create at least 2 pages with links between them using the next/link component.
6. Click on a link.
7. The browser navigates to the page, but with https.

[johnmpotter]

We are seeing the same issue in our project

[MushuPlatypus]

As a temporary workaround I've been using the local-ssl-proxy package. It works but it would be nicer if it wasn't needed

[eiskalteschatten]

Thanks for the suggestion. I'll try it out as a workaround for now. 👍🏻

[jordymeow]

Issue is still present for me in NextJS 11. I am no using subdomains, but virtual folders instead (/fr, /de).

[ijjk]

If you want to use http instead of https when testing locally, you can set http: true on the local domain e.g.

module.exports = {
  i18n: {
    locales: ['en','fr'],
    defaultLocale: 'en',
    domains: [{ http: true, domain: 'example.com', locale: 'en' }]
  }
}

[jordymeow]

@ijjk Thank you! That's awesome. Should be in the docs :)

[eiskalteschatten]

If you want to use http instead of https when testing locally, you can set http: true on the local domain e.g.

module.exports = {
  i18n: {
    locales: ['en','fr'],
    defaultLocale: 'en',
    domains: [{ http: true, domain: 'example.com', locale: 'en' }]
  }
}

I just tried this out and it leads to an endless redirect loop. Any ideas why?

[ijjk]

@eiskalteschatten can you provide a specific reproduction/config where you are seeing unexpected redirecting?

[eiskalteschatten]

This is my next.config.js:

module.exports = {
  trailingSlash: true,
  i18n: {
    locales: ['en', 'de'],
    defaultLocale: 'en',
    localeDetection: false,
    domains: [
      {
        domain: process.env.REACT_APP_EN_DOMAIN,
        defaultLocale: 'en',
        http: process.env.NODE_ENV === 'development',
      },
      {
        domain: process.env.REACT_APP_DE_DOMAIN,
        defaultLocale: 'de',
        http: process.env.NODE_ENV === 'development',
      }
    ]
  },
  env: {
    REACT_APP_PROTOCOL: process.env.REACT_APP_PROTOCOL,
    REACT_APP_EN_DOMAIN: process.env.REACT_APP_EN_DOMAIN,
    REACT_APP_DE_DOMAIN: process.env.REACT_APP_DE_DOMAIN
  },
};

The env variables are set as following:

REACT_APP_PROTOCOL=http://
REACT_APP_EN_DOMAIN=en.localhost:3000
REACT_APP_DE_DOMAIN=de.localhost:3000

Even if I hardcode the values though, it still leads to a redirect loop.

[ijjk]

I'm not able to reproduce unexpected redirecting with the above config on the latest version of Next.js v11.0.1, if you can provide a repo with a minimal reproduction I can investigate further! Note the port being present in the domain can cause unexpected full page navigations/failure to match though as it's meant to only be a hostname

[eiskalteschatten]

@ijjk Sorry I'm just getting back to you now. It's been a busy week.

I created a minimal application with Next.js 11.0.1 where the problem occurs: https://github.com/eiskalteschatten/next-redirect-error

All you should have to do to reproduce it is to run npm i, then npm run dev and visit either http://en.localhost:3000 or http://de.localhost:3000. Of course, you also need the domains in your /etc/hosts file:

127.0.0.1       en.localhost
127.0.0.1       de.localhost

[eiskalteschatten]

I wish I had read your comment above more closely. As soon as I removed the port from the hostnames, the redirect loop stops. 😩 That seems to have fixed the problem.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.