What are some examples of internationalization in Next.js?

What are some examples of internationalization in Next.js?

Next.js provides built-in support for internationalization (i18n). You can define locales, defaultLocale, and more in your next.config.js.

Can you show me a simple code example?

Sure! Here's a basic example:

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

This config sets up English, French, and Spanish as available languages.

How do I switch languages in my app?

You can use the next/router to change the locale. For example:

import { useRouter } from 'next/router';

const LanguageSwitcher = () => {
  const router = useRouter();

  const changeLanguage = (lang) => {
    router.push(router.pathname, router.asPath, { locale: lang });
  };

  return (
    <div>
      <button onClick={() => changeLanguage('fr')}>Français</button>
      <button onClick={() => changeLanguage('es')}>Español</button>
    </div>
  );
};

This component allows users to switch between French and Spanish.

What about translating static content?

For static content, you can use JSON files for each locale. For example:

// public/locales/en/common.json
{
  "welcome": "Welcome"
}
// public/locales/fr/common.json
{
  "welcome": "Bienvenue"
}

Then, use a library like next-i18next to load and use these translations in your components.