Setting Up Internationalized Routing

Demonstrate how to configure next.config.js to enable internationalization and setup localized routing paths.

// next.config.js
module.exports = {
  i18n: {
    // These are all the locales you want to support in
    // your application
    locales: ['en', 'fr', 'es'],
    // This is the default locale you want to be used when visiting
    // a non-locale prefixed path e.g. `/hello`
    defaultLocale: 'en',
    // This is a list of locale domains and the default locale they
    // should handle (these are only required when setting up domain routing)
    // Feel free to remove this if you're not using domain routing
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en',
      },
      {
        domain: 'example.fr',
        defaultLocale: 'fr',
      },
      {
        domain: 'example.es',
        defaultLocale: 'es',
      },
    ],
  },
}

This configuration enables multiple locales (English, French, and Spanish) in a Next.js application with a default locale of English. It also sets up domain routing for different locales.

// pages/index.js for the default locale (English)
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to the homepage!</h1>
    </div>
  );
}

This is the homepage component for the default locale, which will be served at the root path '/' for the domain corresponding to the 'en' locale.

// pages/index.js inside pages/fr for the French locale
export default function HomePage() {
  return (
    <div>
      <h1>Bienvenue sur la page d'accueil!</h1>
    </div>
  );
}

This is the homepage component for the French locale, which will be served at the path '/fr/' for the domain corresponding to the 'fr' locale.

// pages/index.js inside pages/es for the Spanish locale
export default function HomePage() {
  return (
    <div>
      <h1>¡Bienvenido a la página principal!</h1>
    </div>
  );
}

This is the homepage component for the Spanish locale, which will be served at the path '/es/' for the domain corresponding to the 'es' locale.

/* CSS styles for demonstration */
h1 {
  color: #0070f3;
}

CSS styling for the h1 tag to set the text color demonstrating how you might style your components.