- Home
- Services
- IVY
- Portfolio
- Blogs
- About Us
- Contact Us
- Sun-Tue (9:00 am-7.00 pm)
- infoaploxn@gmail.com
- +91 656 786 53
How to Internationalize Your Next.js App: From Localization to RTL Support
1. Why Internationalization Matters (Beyond Just Translation)
When I first started, I thought internationalization was just about changing text from English to French. But there’s so much more:
● Currency formats (e.g., $1,000 vs. €1.000)
● Date/time formats
● Text direction (LTR vs. RTL)
● Localized routing and SEO
● Pluralization and contextual strings
Getting this wrong doesn’t just hurt UX, it makes your app feel broken for global users.
2. First Step: Use Next.js Built-in i18n Support
Next.js has built-in support for internationalized routing, which is super helpful.
Update your next.config.js:
module.exports = {
i18n: {
locales: [’en’, ’fr’, ’de’, ’ar’],
defaultLocale: ’en’,
localeDetection: true,
},
};
Now, your routes look like:
/en/products
/fr/products
/ar/products
This gives you auto-prefixed URLs based on locale. Great start!
3. Adding Translations with next-i18next
Next, I integrated next-i18next. It makes loading translation files easy.
Install it:
yarn add next-i18next react-i18next i18next
Create a config:
// next-i18next.config.js
module.exports = {
i18n: {
defaultLocale: ’en’,
locales: [’en’, ’fr’, ’de’, ’ar’],
},
};
Then use it in _app.tsx:
import { appWithTranslation } from ’next-i18next’;
export default appWithTranslation(MyApp);
Create your locale files:
/public/locales/en/common.json
/public/locales/fr/common.json
And use translations like this:
import { useTranslation } from ’next-i18next’;
const { t } = useTranslation(’common’);
return <p>{t(’welcome’)}</p>;
4. Dynamic Routing for Localized Content
I messed this up the first time. If your routes are dynamic (like /products/[id]), you need to generate them for each locale:
Code Example:
export async function getStaticPaths() {
const products = await getProducts();
const paths = [];
[’en’, ’fr’].forEach((locale) => {
products.forEach((product) => {
paths.push({ params: { id: product.id }, locale });
});
});
return { paths, fallback: false };
}
This makes sure that every product page is built per locale.
5. Formatting Dates, Times, and Currency
Here’s where things got messy for me. Showing the same currency/date for every user? Nope.
Solution: Use Intl
const formatted = new Intl.NumberFormat(’fr-FR’, {
style: ’currency’,
currency: ’EUR’,
}).format(1000); // "1 000,00 €"
For dates:
const date = new Intl.DateTimeFormat(’ar-EG’, {
weekday: ’long’,
year: ’numeric’,
month: ’long’,
day: ’numeric’,
}).format(new Date());
You’d be surprised how much this improves the localized experience.
6. RTL (Right-to-Left) Support
Supporting Arabic or Hebrew? You need to flip the layout.
I did it like this:
<body dir={locale === ’ar’ ? ’rtl’ : ’ltr’}>
Or use Tailwind’s RTL plugin to mirror layout direction.
Be careful with spacing, alignment and icon. RTL is more than just flipping text.
7. Common Mistakes I Made
● Hardcoding strings in components.
● Ignoring dynamic content translation (like button labels from a CMS).
● Assuming LTR for all users.
● Forgetting to update locale in stateful routes (like filters or search).
Final Thoughts
Internationalizing your Next.js app isn’t just a feature, it’s a sign of respect for your global users. It’s not always easy, but once I started centralizing translations, formatting correctly, and handling routing smartly, everything fell into place.
If you’re building for the world, this effort is totally worth it.
Related Blogs
Our Trusted
Partner.
Unlock Valuable Cloud and Technology Credits
Imagine reducing your operational costs by up to $100,000 annually without compromising on the technology you rely on. Through our partnerships with leading cloud and technology providers like AWS (Amazon Web Services), Google Cloud Platform (GCP), Microsoft Azure, and Nvidia Inception, we can help you secure up to $25,000 in credits over two years (subject to approval).
These credits can cover essential server fees and offer additional perks, such as:
- Google Workspace accounts
- Microsoft accounts
- Stripe processing fee waivers up to $25,000
- And many other valuable benefits
Why Choose Our Partnership?
By leveraging these credits, you can significantly optimize your operational expenses. Whether you're a startup or a growing business, the savings from these partnerships ranging from $5,000 to $100,000 annually can make a huge difference in scaling your business efficiently.
The approval process requires company registration and meeting specific requirements, but we provide full support to guide you through every step. Start saving on your cloud infrastructure today and unlock the full potential of your business.
