How to Set Up Multi Language in Next.js Easily

To set up multi language in Next.js, use the built-in internationalized routing by configuring the i18n field in next.config.js. You can also use libraries like next-translate or next-i18next for easier translation management and language switching.

Syntax

Next.js supports multi language routing natively by adding an i18n object in next.config.js. This object includes:

• locales: An array of language codes you want to support.
• defaultLocale: The default language shown when no language is specified.
• localeDetection (optional): Enables or disables automatic locale detection.

This setup enables Next.js to serve pages with language prefixes in URLs automatically.

javascript

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

Example

This example shows how to configure Next.js for English, French, and Spanish languages with automatic locale detection. It also demonstrates a simple page that displays the current locale.

javascript

/* next.config.js */
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es'],
    defaultLocale: 'en',
    localeDetection: true
  }
};

/* pages/index.js */
import { useRouter } from 'next/router';

export default function Home() {
  const { locale, locales, defaultLocale } = useRouter();

  return (
    <main>
      <h1>Current Language: {locale}</h1>
      <p>Supported languages: {locales.join(', ')}</p>
      <p>Default language: {defaultLocale}</p>
    </main>
  );
}

Output

<h1>Current Language: en</h1>
<p>Supported languages: en, fr, es</p>
<p>Default language: en</p>

Common Pitfalls

• Forgetting to add the i18n config in next.config.js causes multi language routing to not work.
• Not restarting the Next.js server after changing next.config.js will not apply the language settings.
• Using static paths without locale awareness can break language routing; use getStaticPaths with locale support.
• Not providing translations for all languages leads to missing text or fallback to default language.

Always test language switching and URL prefixes to ensure correct behavior.

javascript

/* Wrong: Missing i18n config */
// next.config.js
module.exports = {};

/* Right: Add i18n config */
module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en'
  }
};

Quick Reference

Feature	Description	Example
locales	Array of supported language codes	['en', 'fr', 'es']
defaultLocale	Default language if none specified	'en'
localeDetection	Enable auto language detection	true or false
useRouter().locale	Get current language in component	const { locale } = useRouter()
URL prefix	Language code added to URL path	/fr/about for French

Key Takeaways

Configure multi language by adding the i18n object in next.config.js with locales and defaultLocale.

Use Next.js router's locale property to detect and display the current language in components.

Restart the Next.js server after changing i18n settings to apply changes.

Ensure all pages and static paths support locales to avoid routing issues.

Consider using libraries like next-i18next for easier translation management.