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