Internationalization (i18n) in Next.js: Building Truly Global Apps

So in this blog, I’ll share exactly how I learned to build truly global apps in Next.js with proper i18n support, without losing my sanity. 

Why Internationalization Matters 

Think about it: your app might be amazing, but if it only supports English, you’re leaving millions (or even billions) of potential users out. 

Here’s what comes into play when you go global: 

• Languages: Text translations (obvious, but important). 
• Date & Time: 08/25/2025 means one thing in the U.S., but another in Europe. 
• Numbers & Currency: $1,000.50 vs 1.000,50 €. 
• Routing: /about in English vs /fr/a-propos in French. 
• Performance: Serving the right language without slowing things down. When I faced these problems, I realized i18n wasn’t just a feature, it was a strategy. Step 1: Enabling Built-in i18n in Next.js 

The good news? Next.js has built-in internationalized routing since v10. 

In next.config.js, you just set it up like this: 

module.exports = { i18n: { 
locales: [’en’, ’fr’, ’de’], defaultLocale: ’en’, 
}, 
}; 

Now, Next.js automatically creates localized routes: 

• /about → English 
• /fr/about → French 
• /de/about → German 

Routing was no longer a headache, Next.js handled it for me. 

Step 2: Managing Translations 

Okay, routing was easy. But then came the harder part: translations. 

For this, I tried a few libraries, and my favorite is next-i18next. It integrates seamlessly with Next.js and uses JSON translation files. 

Example: public/locales/fr/common.json: 
 
{ 
"welcome": "Bienvenue sur mon site", "logout": "Se déconnecter" 
} 

Then, inside my component: 
 
import { useTranslation } from ’next-i18next’; export default function Header() { 
const { t } = useTranslation(’common’); return <h1>{t(’welcome’)}</h1>; 
} 

This way, my app instantly supported multiple languages without bloating code. 

Step 3: Handling Dates, Numbers, and Currency Text is just step one. Formats were my biggest headache. For this, I used Intl (JavaScript Internationalization API): 

new Intl.DateTimeFormat(’fr-FR’).format(new Date()); 
 
 // "25/08/2025" 
 
new Intl.NumberFormat(’de-DE’, { style: ’currency’, 
currency: ’EUR’, 
 
}).format(1999.99); 
 
// "1.999,99 €" 

The key here? Always use the user’s locale from Next.js and format accordingly. 

My Takeaways 

If you’re adding i18n in Next.js, here’s my advice from experience: 

1. Start with routing: it’s the backbone. 
2. Pick a translation library early: don’t roll your own. 
3. Don’t forget formats: dates, numbers, and currency matter. 
4. Test on real devices: especially for RTL languages. 
5. Keep performance in mind: load only what’s needed. 

Conclusion 

Internationalization in Next.js isn’t just a checkbox, it’s a mindset. Once I started thinking globally, my apps instantly felt more professional, accessible, and user-first. 

If you’re struggling with i18n, trust me: take it step by step. Set up routes, add translations, handle formats, and optimize. Before you know it, your app will be ready for users in Paris, Berlin, Dubai, and beyond.