title: Next.js domain routing with sub-domains
body: <p>I am trying to translate my Next app based on the current sub-domain. For example, I would like <code>en.hello.com</code> to be in English, and <code>it.hello.com</code> to be in Italian.</p>
  <p>I am trying to achieve that using Next's <a href="https://nextjs.org/docs/advanced-features/i18n-routing#domain-routing" rel="nofollow noreferrer">domain routing</a>, but apparently, that is not meant to be used with sub-domains but rather with top-level domains like <code>hello.en</code> and <code>hello.it</code> for English and Italian for example.</p>
  <p>Here is my <strong>next.config.js</strong>:</p>
  <pre><code>module.exports = {
    i18n: {
      locales: [&quot;en&quot;, &quot;it&quot;],
      defaultLocale: &quot;en&quot;,
  
      domains: [
        {
          domain: &quot;en.hello.com&quot;,
          defaultLocale: &quot;en&quot;,
        },
        {
          domain: &quot;it.hello.com&quot;,
          defaultLocale: &quot;it&quot;,
        },
      ],
    },
  };
  </code></pre>
  <p>These settings fail to map <code>en.hello.com</code> to English and <code>it.hello.com</code> to Italian.</p>
  <p><strong>Can anybody explain why that is and how can I achieve sub-domain routing in Next?</strong></p>