Using http instead of https locally with localized domains

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',
  }
]

1. Add the local domains to your hosts file:

127.0.0.1       en.localhost
127.0.0.1       de.localhost

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

[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.

[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' }]
  }
}