Next.js and Internationalization - Building Multilingual Websites

Setting up Internationalization in Next.js

To enable internationalization in your Next.js application, follow these steps:

• Install the necessary dependencies. We will use next-i18next package to handle i18n in Next.js.

 Copy 
npm install next-i18next react-i18next i18next

• Create an i18n configuration file, such as i18n.js, in the root of your project.

 Copy 
// i18n.js
import NextI18Next from "next-i18next";

const NextI18NextInstance = new NextI18Next({
  defaultLanguage: "en",
  otherLanguages: ["fr", "de", "es"], // Add more languages as needed
});

export default NextI18NextInstance;

• Create the next-i18next.config.js file to configure Next.js to work with i18n.

 Copy 
// next-i18next.config.js
const path = require("path");

module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr", "de", "es"], // Add more languages as needed
  },
  localePath: path.resolve("./public/locales"),
};

• Create a folder named locales inside your public folder. Add JSON files for each language you want to support.

 Copy 
// public/locales/en.json
{
  "home": "Home",
  "about": "About",
  "contact": "Contact"
}

// public/locales/fr.json
{
  "home": "Accueil",
  "about": "À propos",
  "contact": "Contact"
}

• Wrap your Next.js application with the appWithTranslation higher-order component.

 Copy 
// pages/_app.js
import { appWithTranslation } from "next-i18next";
import i18n from "../i18n";

const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;

export default appWithTranslation(MyApp);

Translating Content

To translate content in your Next.js components, you can use useTranslation hook from react-i18next.

 Copy 
// components/Navbar.js
import Link from "next/link";
import { useTranslation } from "react-i18next";

const Navbar = () => {
  const { t } = useTranslation();

  return (
    <nav>
      <ul>
        <li>
          <Link href="/">
            <a>{t("home")}</a>
          </Link>
        </li>
        <li>
          <Link href="/about">
            <a>{t("about")}</a>
          </Link>
        </li>
        <li>
          <Link href="/contact">
            <a>{t("contact")}</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

In this example, we used the t function from useTranslation to translate the content based on the active language.

Switching Languages

To enable language switching, you can use the useRouter hook from next/router and setI18nLanguage from next-i18next.

 Copy 
// components/LanguageSwitcher.js
import { useRouter } from "next/router";
import { useTranslation } from "react-i18next";
import i18n from "../i18n";

const LanguageSwitcher = () => {
  const { t } = useTranslation();
  const router = useRouter();

  const handleLanguageChange = (e) => {
    const selectedLanguage = e.target.value;
    i18n.changeLanguage(selectedLanguage);
    router.push(router.pathname, router.asPath, { locale: selectedLanguage });
  };

  return (
    <select value={i18n.language} onChange={handleLanguageChange}>
      <option value="en">{t("english")}</option>
      <option value="fr">{t("french")}</option>
      <option value="de">{t("german")}</option>
      <option value="es">{t("spanish")}</option>
    </select>
  );
};

export default LanguageSwitcher;

In this example, we handled language change by updating the language in next-i18next and pushing the new locale to the Next.js router.

Conclusion

Next.js and internationalization (i18n) can help you build multilingual websites, ensuring that your content is accessible to a global audience. In this blog post, we learned how to set up internationalization using next-i18next, translate content using the useTranslation hook, and switch languages using the useRouter hook.