Domain routing for locales in NextJS - Mini Project: Build & Apply

Domain Routing for Locales in Next.js

📖 Scenario: You are building a website that supports multiple languages. You want users to see the right language version based on the domain they visit. For example, visitors to example.fr see the French site, and visitors to example.com see the English site.

🎯 Goal: Create a Next.js configuration that routes different domains to their matching locale automatically. This means when a user visits a domain, the website shows content in the correct language without extra clicks.

📋 What You'll Learn

Create a Next.js next.config.js file with locale settings

Define supported locales: en and fr

Set the default locale to en

Configure domain routing so example.com uses en and example.fr uses fr

Use the i18n property in Next.js config for locale and domain mapping

💡 Why This Matters

🌍 Real World

Many websites serve users in different countries and languages. Domain routing helps show the right language version automatically, improving user experience.

💼 Career

Understanding Next.js internationalization and domain routing is valuable for frontend developers working on global websites and apps.

1

Set up basic Next.js i18n locales

Create a next.config.js file and add an i18n configuration with locales set to ["en", "fr"] and defaultLocale set to "en".

NextJS

module.exports = {
  i18n: {
    // Your code here
  }
}

Hint

Use the i18n key in module.exports to define locales and defaultLocale.

2

Add domain routing configuration

Inside the i18n configuration in next.config.js, add a domains array with two objects: one for example.com with defaultLocale "en", and one for example.fr with defaultLocale "fr".

NextJS

module.exports = {
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en",
    // Your code here
  }
}

Hint

Use the domains array inside i18n to map domains to locales.

3

Create a simple page to show current locale

Create a file pages/index.js with a React functional component that uses the useRouter hook from next/router to get the current locale and displays it inside a <main> element.

NextJS

import { useRouter } from "next/router";

export default function Page() {
  // Your code here
}

Hint

Use useRouter from next/router to access the locale.

4

Complete Next.js app with domain routing and locale display

Ensure your next.config.js includes the full i18n config with locales, defaultLocale, and domains mapping. Also, confirm your pages/index.js exports the component that shows the current locale using useRouter.

NextJS

module.exports = {
  i18n: {
    locales: ["en", "fr"],
    defaultLocale: "en",
    domains: [
      {
        domain: "example.com",
        defaultLocale: "en"
      },
      {
        domain: "example.fr",
        defaultLocale: "fr"
      }
    ]
  }
};

import { useRouter } from "next/router";

export default function Page() {
  const { locale } = useRouter();
  return Current locale: {locale};
  // Your code here
}

Hint

Make sure the config and page component are both present and correct.

Practice

1. What is the main purpose of domain routing for locales in Next.js?

easy

A. To enable client-side routing only

B. To improve server performance by caching

C. To create multiple apps in one project

D. To serve different languages on different domains

Solution

1. Step 1: Understand domain routing concept

   Domain routing allows serving different languages or locales on separate domains or subdomains.

2. Step 2: Identify the main use case in Next.js

   Next.js uses domain routing to link domains to specific locales for internationalization.

3. Final Answer:

   To serve different languages on different domains -> Option D

4. Quick Check:

   Domain routing = serve languages on domains [OK]

Hint: Domain routing connects domains to languages [OK]

Common Mistakes:

• Confusing domain routing with caching
• Thinking it only affects client-side routing
• Assuming it creates multiple apps

2. Which Next.js config property is used to define domain routing for locales?

easy

A. routing.locales

B. i18n.domains

C. locales.domains

D. next.config.domains

Solution

1. Step 1: Recall Next.js i18n config structure

   The internationalization config uses the i18n key in next.config.js.

2. Step 2: Identify the property for domain routing

   The correct property to define domain-locale mapping is i18n.domains.

3. Final Answer:

   i18n.domains -> Option B

4. Quick Check:

   Domain routing config = i18n.domains [OK]

Hint: Look inside i18n config for domains key [OK]

Common Mistakes:

• Using next.config.domains instead of i18n.domains
• Confusing with routing.locales
• Trying to set domains outside i18n

3. Given this Next.js i18n config snippet, what locale will be served for requests to https://example.fr?

i18n: {
  locales: ['en', 'fr'],
  defaultLocale: 'en',
  domains: [
    { domain: 'example.com', defaultLocale: 'en' },
    { domain: 'example.fr', defaultLocale: 'fr' }
  ]
}

medium

A. fr

B. en

C. defaultLocale from browser

D. No locale, error occurs

Solution

1. Step 1: Check domain-locale mapping in config

   The domain example.fr is mapped to fr locale explicitly.

2. Step 2: Determine locale served for example.fr

   Requests to example.fr will serve the French locale fr.

3. Final Answer:

   fr -> Option A

4. Quick Check:

   example.fr domain = fr locale [OK]

Hint: Match domain to locale in i18n.domains array [OK]

Common Mistakes:

• Assuming defaultLocale 'en' applies to all domains
• Thinking browser locale overrides domain
• Believing error occurs without explicit locale

4. You wrote this middleware to detect locale by domain but it always serves the default locale. What is the likely mistake?

export function middleware(request) {
  const hostname = request.headers.get('host')
  if (hostname === 'example.fr') {
    return NextResponse.rewrite(new URL('/fr', request.url))
  }
  return NextResponse.next()
}

medium

A. Rewriting to '/fr' instead of setting locale cookie

B. Not returning a response for all domains

C. Using 'host' header instead of 'x-forwarded-host'

D. Middleware missing 'export default'

Solution

1. Step 1: Understand middleware role in locale detection

   Middleware should set locale or rewrite URL to include locale prefix properly.

2. Step 2: Identify issue with rewriting only

   Rewriting to '/fr' alone may not set locale context; locale cookie or header is needed for Next.js to recognize locale.

3. Final Answer:

   Rewriting to '/fr' instead of setting locale cookie -> Option A

4. Quick Check:

   Middleware must set locale, not just rewrite URL [OK]

Hint: Middleware must set locale, not just rewrite URL [OK]

Common Mistakes:

• Assuming host header is wrong
• Forgetting to handle all domains
• Missing export default in middleware

5. How would you configure Next.js to serve English on 'example.com' and French on 'example.fr' using domain routing, ensuring the default locale is English and URLs do not show locale prefixes?

hard

A. Set i18n.locales to ['en', 'fr'], defaultLocale to 'en', and i18n.domains with domains for example.com (fr) and example.fr (en), and use localeDetection: true

B. Set i18n.locales to ['en', 'fr'], defaultLocale to 'fr', and i18n.domains with domains for example.com (fr) and example.fr (en), and use localeDetection: true

C. Set i18n.locales to ['en', 'fr'], defaultLocale to 'en', and i18n.domains with domains for example.com (en) and example.fr (fr), and use localeDetection: false

D. Set i18n.locales to ['en', 'fr'], defaultLocale to 'en', and no domains, rely on middleware only

Solution

1. Step 1: Define locales and defaultLocale correctly

   Locales should be ['en', 'fr'] with defaultLocale 'en' to serve English by default.

2. Step 2: Configure i18n.domains for domain-locale mapping

   Map 'example.com' to 'en' and 'example.fr' to 'fr' in i18n.domains array.

3. Step 3: Disable localeDetection to avoid prefix in URLs

   Setting localeDetection: false prevents Next.js from adding locale prefixes in URLs, serving clean domain-based locales.

4. Final Answer:

   Set i18n.locales to ['en', 'fr'], defaultLocale to 'en', and i18n.domains with domains for example.com (en) and example.fr (fr), and use localeDetection: false -> Option C

5. Quick Check:

   Domain routing + defaultLocale + no prefix = Set i18n.locales to ['en', 'fr'], defaultLocale to 'en', and i18n.domains with domains for example.com (en) and example.fr (fr), and use localeDetection: false [OK]

Hint: Use i18n.domains and disable localeDetection for clean URLs [OK]

Common Mistakes:

• Swapping locales for domains
• Forgetting to disable localeDetection
• Relying only on middleware without domains