How to Build a Multi-Language Site with i18n in Next.js (2025 Edition)
Learn how to build a multi-language site with i18n in Next.js using next-i18next. This complete 2025 guide covers setup, translations, SEO…
How to Build a Multi-Language Site with i18n in Next.js (2025 Edition)
Learn how to build a multi-language site with i18n in Next.js using next-i18next. This complete 2025 guide covers setup, translations, SEO tips, and production-ready best practices.
Not a Medium member? No worries — get free access click this **Friend Link**.
In 2025, localization isn’t just a nice-to-have — it’s essential. Whether you’re launching a SaaS product, an e-commerce store, or a global content platform, delivering your site in multiple languages is a key to growth. As a seasoned Next.js developer, I’ve built several internationalized apps using Next.js’ built-in i18n features, and in this blog, I’ll share exactly how to do it — step by step, the right way.
Why Use i18n in Next.js?
Next.js offers built-in support for internationalized routing and translation integration. By leveraging next.config.js and libraries like next-i18next or react-i18next, you can serve multiple locales with SEO-optimized routes and server-rendered translations.
Step 1: Enable i18n in next.config.js
Start by defining supported locales and the default language.
// next.config.js
module.exports = {
i18n: {
locales: ['en', 'fr', 'de'],
defaultLocale: 'en',
},
};This config allows Next.js to handle locale-based routing like /fr/about, /de/contact, etc.
Step 2: Install Translation Library
Use next-i18next for a production-ready translation setup:
npm install next-i18next react-i18next i18nextCreate a next-i18next.config.js file:
// next-i18next.config.js
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'fr', 'de'],
},
};Then, update next.config.js:
const { i18n } = require('./next-i18next.config');module.exports = {
i18n,
};Step 3: Create Translation Files
Create folders for each language under public/locales:
/public
/locales
/en
common.json
/fr
common.json
/de
common.jsonExample common.json:
{
"greeting": "Hello World!",
"about": "About Us"
}Step 4: Use Translations in Components
Wrap your app with appWithTranslation in _app.js:
import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}export default appWithTranslation(MyApp);Use the useTranslation hook in pages or components:
import { useTranslation } from 'next-i18next';const Home = () => {
const { t } = useTranslation('common');
return <h1>{t('greeting')}</h1>;
};Step 5: Dynamic Language Switcher
Create a component to switch languages:
import { useRouter } from 'next/router';const LanguageSwitcher = () => {
const router = useRouter();
const changeLanguage = (locale) => {
router.push(router.pathname, router.asPath, { locale });
};
return (
<div>
<button onClick={() => changeLanguage('en')}>EN</button>
<button onClick={() => changeLanguage('fr')}>FR</button>
<button onClick={() => changeLanguage('de')}>DE</button>
</div>
);
};Bonus: SEO for Multi-Language Pages
- Each locale has its own path (e.g.,
/fr/home) — perfect for Google indexing. - Use
next/headto setlang, Open Graph tags, and canonical URLs.
import Head from 'next/head';<Head>
<html lang={locale} />
<link rel="alternate" hrefLang="en" href="https://example.com/en" />
<link rel="alternate" hrefLang="fr" href="https://example.com/fr" />
</Head>My Experience Building i18n in Production
I once worked on a fintech dashboard that needed support for English, French, and Arabic. Using next-i18next, we handled RTL languages, user-preferred locales, and SEO—all without switching frameworks or building separate apps. The result? 30% traffic increase from international organic search.
Pro Tips:
- Store user language preferences in cookies.
- Use lazy loading for large translation files.
- Always test locale-based routing on production URLs.
Final Thoughts
Building a multi-language site with Next.js in 2025 is easier than ever, thanks to its integrated i18n support and strong ecosystem. By following this guide and applying the steps above, you’ll build a global-ready application that’s scalable, SEO-friendly, and fast.
If you’re serious about international reach — invest in localization. It’s not just about translation — it’s about performance, usability, and user trust.
Written by Utsav Desai Full Stack Developer | DevOps Specialist | SaaS & Mobile Product Builder Connect with me :- Linkedin | GitHub | Medium
메타데이터
- post_id
- 14ea326a5e67
- slug
- how-to-build-a-multi-language-site-with-i18n-in-next-js-2025-edition-14ea326a5e67
- url
- https://medium.com/@utsavdesai26/how-to-build-a-multi-language-site-with-i18n-in-next-js-2025-edition-14ea326a5e67
- canonical_url
- https://medium.com/@utsavdesai26/how-to-build-a-multi-language-site-with-i18n-in-next-js-2025-edition-14ea326a5e67
- author_url
- https://medium.com/@utsavdesai26
- status
- ok
- fetched_at
- 2026-06-09 15:37:30
