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

Need a 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
  }
}

Need a 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
}

Need a 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
}

Need a hint?

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