What does a Next.js developer do in the UAE?

A Next.js developer in the UAE designs, builds, and maintains web applications tailored to local business requirements, including Arabic RTL support, UAE payment gateways, and compliance with local regulations.

How much does Next.js development cost in Abu Dhabi?

Next.js development costs in Abu Dhabi typically range from AED 5,000 for simple projects to AED 80,000+ for enterprise platforms, depending on scope, features, and integrations required.

Why hire a PMP-certified developer for your UAE project?

A PMP-certified developer brings structured project management — clear timelines, risk control, and stakeholder communication — alongside technical delivery, reducing project overruns common in unmanaged development engagements.

Building Bilingual Arabic/English Websites with Next.js and RTL Support

Two years ago, I spent three weeks debugging why a client’s Next.js navbar flipped sideways every time they switched to Arabic. The kicker? It worked fine until they added a custom font. This stuff happens a lot when you’re juggling bilingual sites and right-to-left (RTL) requirements. Here’s what I’ve learned building Tawasul Limo’s booking platform and 15+ other bilingual projects for UAE businesses since 2020.

Setting Up Language Detection in Next.js

First, figure out how users switch languages. Most UAE clients want a toggle — not automatic detection. People here often switch between Arabic and English manually, especially in Abu Dhabi/Dubai where both languages are widely used. I use next-i18next because it’s battle-tested, though the configuration feels like navigating a maze sometimes. Install it with:

bash

npm install next-i18next react-i18next i18next

Version 8.4.0 fixed some hydration issues I had on a previous project. You’ll create a i18n.ts config pointing to /public/locales/{ar,en}/common.json. One gotcha: the Arabic JSON files must be UTF-8 encoded or you’ll get invisible glyph shifts — I spent a day on that last year.

Handling RTL Styling in Components

Don’t rely on dir="rtl" alone. The default text-align behavior flips automatically, but custom CSS won’t. For a Dubai-based e-commerce client, I built a component wrapper that applies RTL styles based on a global context:

tsx

const Text = ({ children }) => (
  <span className={isArabic ? 'ar-text' : 'en-text'}>
    {children}
  </span>
)

Then in your Sass files:

scss

.ar-text { text-align: right; direction: rtl; }
.en-text { text-align: left; direction: ltr; }

For heavier lifting, use PostCSS with the rtlcss plugin. It transforms left/right properties automatically. But be careful — I once broke a carousel component by converting all positioning rules. Scoped transformations work better than global ones.

Fetching Dual-Language Data from APIs

Most UAE clients store content in separate language files, but a few use CMS like Strapi with i18n plugins. For Tawasul Limo’s backend (a Laravel API), I added a /translations/{lang} endpoint that returns flat JSON. Fetching live translations added 200ms latency, but that’s acceptable when you’re handling pre rendered pages.

If you’re using Server Side Rendering, prefetch the translations in getServerSideProps. For a real estate client, I cached the Arabic responses in Redis since they changed less frequently than English content — that dropped load time by 45%.

Styling Challenges With Arabic Fonts

Arabic fonts like Noto Sans Arabic aren’t embedded by default. I add them via next/font:

tsx

import { notoSansArabic } from '../fonts'
<body className={notoSansArabic.className}>

But here’s the thing: font weights sometimes mismatch between Arabic and Latin characters. A client in Abu Dhabi once complained the Arabic "Bold" buttons looked thinner — turns out font-weight: 700 uses different glyph sets. My fix was to manually adjust weights in critical components:

css

.arabic-bold { font-weight: 800 !important; }

Frequently Asked Questions

How do I test RTL layouts effectively in Next.js?

Use BrowserStack or Chrome DevTools’ RTL extension. I also add a temporary div with dir="rtl" at the top of pages during dev. The fake div trick cuts down on full reloads — just toggle it instead.

Should I duplicate routes for Arabic/English pages?

Yes. For SEO, keep /about and /ar/about separate. UAE users Google in both languages, and duplicate routes help track performance by region. A/B testing tools like Hotjar also need distinct URLs to track language preferences.

How do I handle image flips for RTL?

Icons pointing left should reverse in Arabic. SVGs with transform="scale(-1,1)" work, but PNGs need separate assets. For a logistics company’s site in Dubai, I built a React hook that swaps image URLs based on language:

tsx

const useLocalizedImage = (enImg, arImg) => 
  isArabic ? arImg : enImg

Do I need separate SEO metadata for each language?

Absolutely. Arabic meta tags must be localized — we’re building real bilingual sites, not just translated pages. Use a Head component that switches title/description based on language. My Arabic SEO guide covers specific Google Structured Data requirements for right-to-left content.

Want to avoid the navbar flipping chaos I mentioned earlier? Let’s chat about your Next.js Arabic project — I’ll help you ship it without the week-long debugging sessions. Booking a free consultation takes 2 minutes.