Sub-path routing for locales in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable locale sub-path routing in Next.js configuration.

NextJS

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

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

AlocalePathDetection

BlocaleSubpaths

ClocaleSubpathRouting

DlocalePathRouting

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'localePathDetection' or 'localeSubpaths'.

Confusing locale detection with sub-path routing.

The correct property to enable sub-path routing for locales in Next.js is localeSubpathRouting.

2fill in blank

medium

Complete the Next.js config to set the default locale to French.

NextJS

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

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

AdefaultLocale

BlocaleDefault

CprimaryLocale

DmainLocale

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'localeDefault' or 'primaryLocale' which are not valid Next.js config keys.

Confusing default locale with current locale.

The property to set the default locale in Next.js is defaultLocale.

3fill in blank

hard

Fix the error in the Next.js config to correctly enable locale sub-path routing.

NextJS

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

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

A1

B'enabled'

C'true'

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using string 'true' instead of boolean true.

Using numbers like 1 instead of boolean.

The localeSubpathRouting property expects a boolean true to enable it, not a string or number.

4fill in blank

hard

Fill both blanks to create a Next.js config that supports English and Spanish locales with sub-path routing enabled.

NextJS

module.exports = {
  i18n: {
    locales: [[1]],
    defaultLocale: [2],
    localeSubpathRouting: true
  }
}

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

A'en', 'es'

B'fr', 'de'

C'en'

D'es'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong locale codes like 'fr' or 'de' when asked for English and Spanish.

Setting defaultLocale to a locale not in the locales array.

The locales array should include 'en' and 'es'. The defaultLocale should be 'en'.

5fill in blank

hard

Fill all three blanks to create a Next.js config with locales English, French, and German, defaulting to French, and enabling sub-path routing.

NextJS

module.exports = {
  i18n: {
    locales: [[1]],
    defaultLocale: [2],
    localeSubpathRouting: [3]
  }
}

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

A'en', 'fr', 'de'

B'fr'

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using string 'true' instead of boolean true for sub-path routing.

Setting defaultLocale to a locale not in the locales array.

Omitting one of the required locales.

The locales array includes 'en', 'fr', and 'de'. The defaultLocale is 'fr'. Sub-path routing is enabled with boolean true.