Domain routing for locales in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Next.js handle locale domain routing?

Given this Next.js configuration for i18n domain routing, what will be the locale when a user visits https://example.fr/about?

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

A The locale will be 'fr' because the domain example.fr is mapped to French.

B The locale will be 'en' because the defaultLocale is always 'en' regardless of domain.

C The locale will be 'en' because the path '/about' overrides domain locale settings.

D The locale will be undefined because domain routing requires a special header.

💡 Hint

Check how the domains array maps domains to locales.

Next.js uses the domain to determine the locale if domain routing is configured. Since example.fr is mapped to 'fr', the locale will be French.

📝 Syntax

intermediate

Identify the syntax error in this Next.js domain routing config

Which option contains a syntax error in the Next.js i18n domain routing configuration?

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

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

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

C domains: [ { domain: 'example.com', defaultLocale: 'en' }, { domain: 'example.fr', defaultLocale: 'fr' }

D domains: [ { domain: 'example.com', defaultLocale: 'en' }, { domain: 'example.fr', defaultLocale: 'fr' } ];

💡 Hint

Look for missing brackets or punctuation.

Option C is missing the closing bracket for the domains array, causing a syntax error.

❓ state_output

advanced

What locale is used when domain and path locale conflict?

Consider this Next.js i18n config:

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

If a user visits https://example.fr/en/about, what locale will Next.js use?

A Locale 'fr' because domain locale has higher priority than path prefix.

B Locale 'en' because the path prefix '/en' overrides the domain locale.

C Locale 'en' because defaultLocale always overrides domain locale.

D Locale 'fr' because Next.js ignores path prefixes when domain routing is used.

💡 Hint

Think about how Next.js prioritizes path locale vs domain locale.

When both domain and path locale are present, Next.js prioritizes the path locale prefix over the domain locale.

🔧 Debug

advanced

Why does locale domain routing fail to switch locale?

A developer configures Next.js i18n domains as:

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

But when visiting https://example.fr, the locale remains 'en'. What is the most likely cause?

A The Next.js app is not deployed with the correct domain environment variables.

B The user is visiting the site over HTTP, but domain routing requires HTTPS.

C The browser cache is forcing the 'en' locale despite domain routing.

D The i18n config is missing the 'localeDetection: false' setting.

💡 Hint

Check deployment and domain setup for Next.js apps.

If the app is not deployed or configured to recognize example.fr as a domain, Next.js cannot apply domain locale routing.

🧠 Conceptual

expert

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

Why would a developer choose to use domain routing for locales instead of path-based locale prefixes in Next.js?

A It forces users to always use the defaultLocale regardless of their browser settings.

B It automatically translates content without needing manual locale files or translations.

C It reduces server load by caching all locales on a single domain.

D It allows serving different locales on separate domains, improving SEO and user experience by matching user expectations.

💡 Hint

Think about user experience and SEO benefits of domain routing.

Domain routing lets you serve different languages on different domains, which can improve SEO and make URLs cleaner and more intuitive for users.

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