Building a Multi-Language Website with Next.js: A Step-by-Step Guide

Written by

learnmodernjavascript

in

In today’s interconnected world, reaching a global audience is crucial for any online presence. A multi-language website allows you to break down language barriers and connect with users from diverse backgrounds. This tutorial will guide you through building a multi-language website using Next.js, a powerful React framework, enabling you to create a localized experience for your visitors. We’ll cover everything from setting up internationalization (i18n) to handling different languages and content.

Why Build a Multi-Language Website?

Consider a scenario: you’re selling a product or offering a service, and your website is only available in English. You’re effectively limiting your reach to English-speaking users. By providing content in multiple languages, you:

  • Expand your audience: Tap into new markets and connect with users who prefer their native language.
  • Improve user experience: Make your website more accessible and user-friendly for a wider audience.
  • Boost SEO: Improve search engine rankings in different regions by targeting localized keywords.
  • Increase conversions: Users are more likely to engage with content in their preferred language, leading to higher conversion rates.

This tutorial will show you how to implement a robust and maintainable multi-language solution using Next.js, making your website globally accessible.

Prerequisites

Before we begin, ensure you have the following:

  • A basic understanding of JavaScript and React.
  • Node.js and npm (or yarn) installed on your system.
  • A Next.js project set up (if you don’t have one, create it using `npx create-next-app my-multi-language-site`).

Setting Up Internationalization (i18n) in Next.js

Next.js offers built-in support for i18n, making it relatively straightforward to implement multi-language features. We’ll use the `next-i18next` library, which simplifies the process even further. Install it in your project:

npm install next-i18next

or

yarn add next-i18next

1. Configure `next-i18next`

Create a file named `next-i18next.config.js` in the root directory of your project (or any other location you prefer, but you’ll need to adjust the import paths accordingly). This file will configure the i18n settings. Here’s a basic example:

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

In this configuration:

  • `defaultLocale`: Specifies the default language of your website (English in this case).
  • `locales`: An array of supported locales (English and Spanish). You can add more languages here as needed.

2. Create Translation Files

Next, create a directory called `public/locales`. Inside this directory, create subdirectories for each language you support (e.g., `en`, `es`). Within each language directory, create JSON files to store your translations. For example:

public/locales/en/common.json

{
  "title": "My Website",
  "welcome": "Welcome to our website!",
  "about": "About Us",
  "contact": "Contact",
  "language": "Language"
}

public/locales/es/common.json

{
  "title": "Mi Sitio Web",
  "welcome": "¡Bienvenido a nuestro sitio web!",
  "about": "Acerca de Nosotros",
  "contact": "Contacto",
  "language": "Idioma"
}

These JSON files will hold the translated text for your website. The keys (e.g., “title”, “welcome”) remain the same, while the values are the translations for each language.

3. Importing and Using Translations

Now, let’s use these translations in your React components. Import the `useTranslation` hook from `next-i18next`:

import { useTranslation } from 'next-i18next';

Here’s how you can use it in a component:

import { useTranslation } from 'next-i18next';

function HomePage() {
  const { t } = useTranslation('common'); // 'common' is the namespace, referring to common.json

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('welcome')}</p>
    </div>
  );
}

export default HomePage;

In this code:

  • `useTranslation(‘common’)`: This hook returns a `t` function. The string argument (‘common’ in this case) specifies the namespace, which corresponds to the filename (e.g., `common.json`). If you have different translation files (e.g., `navigation.json`), you’d pass their names accordingly.
  • `t(‘title’)`: The `t` function takes the key from your translation files as an argument and returns the translated value based on the current locale.

Implementing Language Switching

The next step is to allow users to switch between languages. We’ll create a simple language selector component. First, import `useRouter` and `useTranslation`:

import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';

Here’s the component:

import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';

function LanguageSwitcher() {
  const { t } = useTranslation('common');
  const router = useRouter();

  const { locales, locale, asPath } = router;

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

  return (
    <div>
      <label htmlFor="language-select">{t('language')}:</label>
      <select
        id="language-select"
        value={locale}
        onChange={(e) => changeLanguage(e.target.value)}
      >
        {locales.map((loc) => (
          <option key={loc} value={loc}>
            {loc}
          </option>
        ))}
      </select>
    </div>
  );
}

export default LanguageSwitcher;

Let’s break down this component:

  • `useRouter()`: Provides access to the Next.js router, allowing us to get the current locale (`locale`), available locales (`locales`), and the current path (`asPath`).
  • `changeLanguage()`: This function updates the route to the new locale using `router.push()`. The `asPath` is the current path, ensuring that the user remains on the same page after changing the language. The `locale` option specifies the new language.
  • The component renders a “ element with options for each available locale. When the user selects a different language, the `changeLanguage` function is called.

Remember to import and include this `LanguageSwitcher` component in your layout or navigation bar for users to interact with it.

Handling Different Content for Each Language

Beyond translating text, you might need to display different content or components based on the selected language. Here’s how to do it using the `locale` from the router.

import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';

function HomePage() {
  const { t } = useTranslation('common');
  const router = useRouter();
  const { locale } = router;

  return (
    <div>
      <h1>{t('title')}</h1>
      {locale === 'en' && (
        <p>This is the English version of the content.</p>
      )}
      {locale === 'es' && (
        <p>Esta es la versión en español del contenido.</p>
      )}
    </div>
  );
}

export default HomePage;

In this example, we conditionally render different paragraphs based on the `locale` value. You can adapt this approach to display different images, components, or even entire sections of your website based on the selected language.

SEO Considerations for Multi-Language Websites

When building a multi-language website, it’s crucial to optimize it for search engines. Here are some key SEO best practices:

1. Use the `hreflang` Attribute

The `hreflang` attribute tells search engines the language and geographical targeting of a webpage. Include it in the “ of your HTML document. You can use the `next/head` component in Next.js to add it:

import Head from 'next/head';
import { useRouter } from 'next/router';

function HomePage() {
  const router = useRouter();
  const { locales, locale, asPath } = router;

  return (
    <div>
      <Head>
        {locales.map((loc) => (
          <link
            key={loc}
            rel="alternate"
            hrefLang={loc}
            href={`https://yourdomain.com${asPath}`}
          />
        ))}
        <link
          rel="alternate"
          hrefLang="x-default"
          href={`https://yourdomain.com${asPath}`}
        />
      </Head>
      <h1>My Website</h1>
      <p>Welcome!</p>
    </div>
  );
}

export default HomePage;

In this example:

  • We use `locales.map()` to generate a “ tag for each supported language.
  • `hrefLang` is set to the language code (e.g., “en”, “es”).
  • `href` is the URL of the page in that language. Make sure to adjust the domain.
  • We also include `hrefLang=”x-default”`, which specifies the default language for users whose language isn’t explicitly targeted.

2. Use Language-Specific URLs

There are several ways to structure your URLs for different languages:

  • Subdirectories: `www.example.com/en/about`, `www.example.com/es/about` (recommended for Next.js)
  • Subdomains: `en.example.com/about`, `es.example.com/about`
  • Domain Names: `www.example.com`, `www.example.es` (country-specific domain names)

Using subdirectories is generally the easiest and most SEO-friendly approach with Next.js, as demonstrated in the language switching code.

3. Translate Meta Descriptions and Titles

Make sure to translate your meta descriptions and titles to improve your search engine rankings in each language. You can use `next/head` to dynamically set these based on the `locale`:

import Head from 'next/head';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';

function HomePage() {
  const { t } = useTranslation('common');
  const router = useRouter();
  const { locale } = router;

  return (
    <div>
      <Head>
        <title>{t('title')}</title>
        <meta name="description" content={t('metaDescription')} />
      </Head>
      <h1>{t('title')}</h1>
      <p>{t('welcome')}</p>
    </div>
  );
}

export default HomePage;

Make sure to add `metaDescription` keys to your translation files.

4. Keyword Research

Perform keyword research in each language to identify the terms your target audience uses when searching for information related to your website. Incorporate these keywords naturally into your content, titles, and meta descriptions.

Common Mistakes and How to Fix Them

1. Incorrect Configuration

Mistake: Incorrectly configuring the `next-i18next.config.js` file or the translation file paths. This can lead to errors like “Cannot find module” or translations not loading.

Fix: Double-check your configuration file and file paths. Ensure the `defaultLocale` and `locales` are set correctly, and that the paths to your translation files are accurate. Also, verify that the namespaces used in `useTranslation` match your filenames.

2. Missing Translations

Mistake: Not providing translations for all the text on your website. This can result in untranslated text appearing in the default language, which is not a good user experience.

Fix: Make sure to translate all strings used in your components and add them to your translation files. Consider using a translation management tool to help with this process, especially for large websites.

3. Ignoring SEO Best Practices

Mistake: Failing to implement `hreflang` tags, translate meta descriptions, and optimize your website for each language. This can negatively impact your search engine rankings.

Fix: Follow the SEO best practices outlined above. Implement `hreflang` tags, translate your meta descriptions and titles, and perform keyword research for each language.

4. Incorrectly Handling Dynamic Content

Mistake: Not handling dynamic content (e.g., data fetched from an API) correctly for each language. This can lead to incorrect data being displayed.

Fix: If your data is language-specific, ensure you fetch the correct data based on the current `locale`. You might need to adjust your API calls or use different data sources for each language.

Key Takeaways

  • Next.js provides excellent built-in support for internationalization.
  • The `next-i18next` library simplifies the process of implementing multi-language websites.
  • Use translation files to store your translated text and the `useTranslation` hook to access them.
  • Implement a language switcher to allow users to easily change languages.
  • Consider SEO best practices, such as `hreflang` tags and translated meta descriptions, to optimize your website for search engines.

FAQ

1. How do I add a new language?

To add a new language, follow these steps:

  1. Add the language code (e.g., “fr” for French) to the `locales` array in your `next-i18next.config.js` file.
  2. Create a new directory for the language in your `public/locales` directory (e.g., `public/locales/fr`).
  3. Create translation files (e.g., `common.json`) for the new language and add your translations.
  4. Update your language switcher component to include the new language option.

2. How can I translate content from an API?

If you’re fetching data from an API, you’ll need to adapt your API calls to retrieve the data in the appropriate language. Here are a few approaches:

  • Language-Specific Endpoints: If your API supports it, use language-specific endpoints (e.g., `/api/products?lang=fr`).
  • Headers: Pass the current `locale` in the `Accept-Language` header in your API requests.
  • Server-Side Translation: If the API doesn’t support language selection directly, you might need to translate the data on the server-side before sending it to the client.

3. How to handle pluralization?

The `next-i18next` library supports pluralization. In your translation files, you can use a special syntax to handle different plural forms based on the number. For example:

public/locales/en/common.json

{
  "item_count": "{{count}} item",
  "item_count_plural": "{{count}} items"
}

And in your component:

import { useTranslation } from 'next-i18next';

function MyComponent({ count }) {
  const { t } = useTranslation('common');
  const itemCount = t('item_count', { count: count });

  return <p>{itemCount}</p>;
}

The `next-i18next` library will automatically choose the correct plural form based on the `count` value.

4. How can I test my multi-language website?

Thorough testing is crucial. Here are some testing strategies:

  • Manual Testing: Manually test your website in different languages to ensure the translations are correct and the user experience is consistent.
  • Automated Testing: Use end-to-end testing tools (e.g., Cypress, Playwright) to automate the process of testing different language versions of your website.
  • Translation Review: Have native speakers review your translations to ensure accuracy and natural language flow.
  • Check SEO: Verify that the `hreflang` tags and meta descriptions are implemented correctly.

5. What are the performance considerations?

Internationalization can impact performance, so consider the following:

  • Lazy Loading: Load your translation files lazily, only when they are needed. `next-i18next` supports this.
  • Caching: Cache your translation files to reduce the number of requests.
  • Code Splitting: If you have large amounts of content, consider code-splitting your components to improve loading times.
  • Image Optimization: Optimize your images for each language to ensure they load quickly.

Building a multi-language website with Next.js opens up your content to a global audience. By following these steps, you can create a user-friendly and SEO-optimized website that resonates with users from different linguistic backgrounds. Remember to prioritize a good user experience and thorough testing to ensure your website is accessible and enjoyable for everyone. As your website grows, consistently review and refine your translations, and stay informed about the latest best practices in internationalization. This commitment to adaptability and inclusivity will help your website thrive in the ever-evolving digital landscape.

More posts