Hire Me

Next.js and Internationalization - Building Multilingual Websites

Updated: 04/02/2023

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.
npm install next-i18next react-i18next i18next
  • Create an i18n configuration file, such as i18n.js, in the root of your project.
// 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.
// 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.
// 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.
// 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.

// 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.

// 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.