Domain routing for locales in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define the default locale in Next.js domain routing.

NextJS

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

Drag options to blanks, or click blank then click option'

Aen

Bes

Cfr

Dde

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a locale not listed in the locales array.

Leaving the defaultLocale empty.

The defaultLocale sets the main language for your app. Here, 'en' is the default.

2fill in blank

medium

Complete the code to add a domain for the French locale in Next.js domain routing.

NextJS

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

Drag options to blanks, or click blank then click option'

Aexample.es

Bexample.com

Cexample.de

Dexample.fr

Attempts:

3 left

💡 Hint

Common Mistakes

Using the English domain for the French locale.

Using a domain with the wrong country code.

The domain example.fr is used for the French locale in domain routing.

3fill in blank

hard

Fix the error in the domain routing config by completing the missing property.

NextJS

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

Drag options to blanks, or click blank then click option'

Alang

Blocale

CdefaultLocale

Dlanguage

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'locale' or 'lang'.

Omitting the property entirely.

The correct property to specify the locale for a domain is defaultLocale.

4fill in blank

hard

Fill both blanks to configure domain routing for English and French locales.

NextJS

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

Drag options to blanks, or click blank then click option'

Aen

Bexample.fr

Cexample.com

Dfr

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the domain names for the locales.

Using locale codes instead of domain names.

The default locale is 'en' and the French domain is 'example.fr'.

5fill in blank

hard

Fill all three blanks to complete the Next.js domain routing config with English and French locales and domains.

NextJS

module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: '[1]',
    domains: [
      {
        domain: '[2]',
        defaultLocale: '[3]'
      }
    ]
  }
}

Drag options to blanks, or click blank then click option'

Aen

Bexample.fr

Cfr

Dexample.com

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up domain names and locale codes.

Setting defaultLocale to a domain name instead of a locale code.

The default locale is 'en' (served on the main domain like example.com), and the French domain is 'example.fr' with defaultLocale 'fr'.

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