Tutorial 13 min read

Building a Professional Arabic Website with Next.js — Complete RTL Guide

Mahmoud Hamdy

March 15, 2026

Building an Arabic website that feels truly professional is harder than it looks. It is not just about setting dir="rtl" on the HTML element and calling it done. Arabic typography has its own rules, bidirectional text is a genuine engineering challenge, SEO for Arabic-language audiences requires specific considerations, and performance matters even more when your users are on mobile networks in Cairo, Riyadh, or Dubai. I have built several Arabic-first websites with Next.js and each one taught me something new. This guide covers everything I know.

Why Next.js for Arabic Sites?

Next.js is the right choice for Arabic websites for several reasons beyond the usual React benefits. Its built-in i18n routing handles /ar and /en route prefixes automatically. Server-side rendering ensures Arabic content is in the initial HTML — critical for SEO since Arabic search engines (and Google's Arabic crawlers) need to read your content without executing JavaScript. The App Router's layout system makes it clean to wrap different language routes in different <html lang> and dir attributes. And next/font handles Arabic font loading efficiently without layout shifts.

RTL Setup: The Right Way

The wrong way is to add a global dir="rtl" and then override everything with margin and padding hacks. The right way is to use CSS logical properties from the start, and to control dir at the <html> level per locale:

// app/[locale]/layout.tsx
import { notFound } from 'next/navigation';

const locales = ['en', 'ar'] as const;
type Locale = typeof locales[number];

export default function LocaleLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: Locale };
}) {
  if (!locales.includes(locale)) notFound();

  const isRTL = locale === 'ar';

  return (
    
      {children}
    
  );
}

i18n Configuration

Next.js 15's App Router handles i18n without a plugin. Create a next.config.ts with your locales, then use the [locale] dynamic segment in your app directory. For translation strings, I prefer a simple JSON file approach with a typed useTranslation hook over bringing in a full library like next-intl for smaller sites:

// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  // App Router handles i18n via the [locale] segment
  // No next.config i18n block needed with App Router
};

export default config;

// middleware.ts — redirect / to /en or /ar based on Accept-Language
import { NextRequest, NextResponse } from 'next/server';

const PUBLIC_FILE = /\.(.*)$/;

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  if (PUBLIC_FILE.test(pathname) || pathname.includes('/_next')) return;

  const hasLocale = ['en', 'ar'].some(
    locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );
  if (hasLocale) return;

  const acceptLanguage = request.headers.get('accept-language') ?? '';
  const preferArabic = acceptLanguage.startsWith('ar');

  return NextResponse.redirect(
    new URL(`/${preferArabic ? 'ar' : 'en'}${pathname}`, request.url)
  );
}

// lib/translations.ts
import en from '@/messages/en.json';
import ar from '@/messages/ar.json';

const messages = { en, ar } as const;
type Locale = keyof typeof messages;

export function getTranslations(locale: Locale) {
  return messages[locale];
}

// Usage in a Server Component:
// const t = getTranslations(locale);
// <h1>{t.hero.title}</h1>

CSS Logical Properties — The Foundation

This is the single most important technical decision for an RTL site. Physical CSS properties like margin-left, padding-right, border-left, and text-align: left are direction-specific and break in RTL. Logical properties map to "start" and "end" relative to the current text direction:

/* WRONG — breaks in RTL */
.card {
  margin-left: 1rem;
  padding-right: 1.5rem;
  border-left: 3px solid var(--accent);
  text-align: left;
}

/* RIGHT — works in both LTR and RTL */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 1.5rem;
  border-inline-start: 3px solid var(--accent);
  text-align: start;
}

/* Tailwind CSS v3.3+ has logical property utilities */
/* ms-4 = margin-inline-start: 1rem */
/* pe-6 = padding-inline-end: 1.5rem */
/* border-s-2 = border-inline-start-width: 2px */
/* text-start = text-align: start */

When using Tailwind, adopt the logical property utilities (ms-, me-, ps-, pe-, border-s-, border-e-, start-, end-) everywhere instead of l- and r-. This is a convention your whole team needs to agree on at the start of the project — retrofitting it later is painful.

Arabic Typography

Choosing the right Arabic font is not a minor decision. System Arabic fonts (like the default on iOS and Android) are functional but not beautiful at display sizes. For professional sites, load a custom Arabic font. My recommendations based on use case:

Tajawal — Clean, modern, excellent for body text and UI elements. Used on this portfolio.
Cairo — Slightly more personality, great for headings and marketing copy.
IBM Plex Sans Arabic — Professional and technical feel, excellent for developer tools and SaaS dashboards.
Noto Naskh Arabic — Traditional and high-readability for long-form content.

// app/[locale]/layout.tsx
import { Tajawal, Cairo } from 'next/font/google';

const tajawal = Tajawal({
  subsets: ['arabic'],
  weight: ['300', '400', '500', '700'],
  variable: '--font-arabic',
  display: 'swap',   // Important: prevents invisible text during font load
});

const cairo = Cairo({
  subsets: ['arabic', 'latin'],
  weight: ['400', '600', '700'],
  variable: '--font-heading-ar',
  display: 'swap',
});

export default function Layout({ children, params: { locale } }) {
  const isRTL = locale === 'ar';
  return (
    <html
      lang={locale}
      dir={isRTL ? 'rtl' : 'ltr'}
      className={`${tajawal.variable} ${cairo.variable}`}
    >
      <body className={isRTL ? 'font-arabic' : 'font-sans'}>
        {children}
      </body>
    </html>
  );
}

/* globals.css */
:root {
  --font-sans: 'Outfit', system-ui, sans-serif;
  --font-arabic: var(--font-arabic), 'Tajawal', 'Arial Unicode MS', sans-serif;
}

[dir="rtl"] {
  font-family: var(--font-arabic);
  font-size: 1.05em; /* Arabic text often benefits from slightly larger size */
  line-height: 1.8;  /* Arabic glyphs are taller, need more line spacing */
  letter-spacing: 0; /* Never apply positive letter-spacing to Arabic */
}

Handling Bidirectional Text

The trickiest scenario is mixed-language content: an Arabic product description with an English brand name, or an Arabic article with English code snippets. The Unicode Bidirectional Algorithm handles most of this automatically, but numbers, punctuation, and inline formatting can still cause visual glitches.

// components/BidiText.tsx
// Wraps text that might contain mixed-direction content
export function BidiText({ children }: { children: React.ReactNode }) {
  return (
    <span
      style={{ unicodeBidi: 'plaintext' }}
      dir="auto"
    >
      {children}
    </span>
  );
}

// For numbers in an Arabic context — always use LTR
export function NumericValue({ value }: { value: string | number }) {
  return (
    <span dir="ltr" style={{ display: 'inline-block' }}>
      {value}
    </span>
  );
}

// Usage:
// <p>المنتج: <BidiText>iPhone 16 Pro Max</BidiText></p>
// <p>السعر: <NumericValue value="SAR 5,299" /></p>

Arabic Form Validation

Arabic form inputs need special attention. Phone number formats differ by country (Egypt: 01X-XXXX-XXXX, Saudi: 05X-XXXX-XXXX). Arabic names can include titles and particles that confuse simple regex validators. And the direction of input fields needs to switch based on what the user is typing:

// lib/validations-ar.ts
import { z } from 'zod';

export const arabicNameSchema = z
  .string()
  .min(2, 'الاسم يجب أن يكون حرفين على الأقل')
  .max(60, 'الاسم طويل جدًا')
  .regex(/^[\u0600-\u06FF\s\u064B-\u065F']+$/, 'الاسم يجب أن يحتوي على أحرف عربية فقط');

export const saudiPhoneSchema = z
  .string()
  .regex(/^(05|5)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/, 'رقم الهاتف السعودي غير صحيح');

export const egyptianPhoneSchema = z
  .string()
  .regex(/^(01)[0-9]{9}$/, 'رقم الهاتف المصري غير صحيح');

// Auto-detect text direction for inputs
export function useInputDirection() {
  const detectDir = (value: string): 'rtl' | 'ltr' | 'auto' => {
    if (!value) return 'auto';
    const firstChar = value.trim()[0];
    const arabicRange = /[\u0600-\u06FF]/;
    return arabicRange.test(firstChar) ? 'rtl' : 'ltr';
  };
  return detectDir;
}

SEO for Arabic Websites

Arabic SEO has specific requirements. The most critical: use hreflang alternate links for every page, and ensure your Arabic content is served as real text (not images of text). Arabic Google searches have different keyword patterns — Arabic users often use Modern Standard Arabic (MSA) for searches even if they speak dialect. Use Google Keyword Planner with Arabic language selected to research properly.

// app/[locale]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata({
  params: { locale },
}: {
  params: { locale: string };
}): Promise {
  const isAr = locale === 'ar';
  return {
    title: isAr
      ? 'متجر الإلكترونيات — أفضل الأسعار في السعودية'
      : 'Electronics Store — Best Prices in Saudi Arabia',
    description: isAr
      ? 'اكتشف أحدث الأجهزة الإلكترونية بأسعار تنافسية مع توصيل سريع لجميع مناطق المملكة'
      : 'Discover the latest electronics at competitive prices with fast delivery across Saudi Arabia',
    alternates: {
      canonical: `https://example.com/${locale}`,
      languages: {
        'ar-SA': 'https://example.com/ar',
        'en-US': 'https://example.com/en',
      },
    },
    openGraph: {
      locale: isAr ? 'ar_SA' : 'en_US',
      alternateLocale: isAr ? 'en_US' : 'ar_SA',
    },
  };
}

Performance for MENA Audiences

Mobile internet in Saudi Arabia and Egypt is fast (4G/5G coverage is high), but users are sensitive to Core Web Vitals because they compare experiences across global apps. Arabic fonts are typically larger than Latin fonts because the character set is richer. Two specific optimizations matter here:

First, subset your Arabic fonts to include only the Unicode blocks you need. The full Arabic Unicode range (U+0600–U+06FF) covers Modern Arabic, plus extended blocks for Persian and Urdu. If you only support Arabic, you can subset to U+0600–U+06FF which saves 30–50KB. The next/font Google Fonts integration handles this automatically with subsets: ['arabic'].

Second, preload your Arabic font for Arabic locale pages. A Largest Contentful Paint caused by a late-loading Arabic font is a common issue:

// app/ar/layout.tsx — preload Arabic font
export default function ArabicLayout({ children }) {
  return (
    <>
      <link
        rel="preload"
        href="/fonts/tajawal-v28-arabic-400.woff2"
        as="font"
        type="font/woff2"
        crossOrigin="anonymous"
      />
      {children}
    </>
  );
}

Common Mistakes to Avoid

After building multiple Arabic sites, here are the mistakes I see repeatedly:

Applying letter-spacing to Arabic text. Arabic script is cursive — letters connect. Letter spacing breaks the connections and makes text look broken. Always set letter-spacing: 0 for Arabic.
Using CSS transforms to flip icons. Directional icons (arrows, chevrons) should flip in RTL. Use CSS logical transforms: transform: scaleX(-1) conditionally, or better, use directionally appropriate SVG icons.
Forgetting to flip flex/grid ordering. Flexbox and grid respect the dir attribute, but only if you use flex-start/flex-end not left/right.
Using absolute positioning with left/right. Switch to inset-inline-start and inset-inline-end.
Not testing on actual Arabic content. English placeholder text does not reveal RTL layout bugs. Use real Arabic content in your development from day one.

Hosting for MENA

For Arabic websites targeting Saudi Arabia and Egypt, edge network proximity matters. Vercel's edge network has nodes in the region and is my default recommendation for Next.js deployments. Cloudflare Pages is a strong alternative. If you need more control, AWS has data centers in Bahrain (me-south-1) and UAE (me-central-1), which gives you sub-50ms latency to most Gulf users. For Egypt-heavy traffic, Cloudflare's network typically performs better than AWS since they have multiple PoPs across North Africa.

بناء موقع عربي يبدو احترافيًا حقًا أصعب مما يبدو في الظاهر. الأمر لا يتوقف على وضع dir="rtl" على عنصر HTML والانتهاء. الطباعة العربية لها قواعدها الخاصة، والنص ثنائي الاتجاه تحدٍّ هندسي حقيقي، وتحسين محركات البحث للجمهور الناطق بالعربية يستلزم اعتبارات خاصة، والأداء مهم بشكل أكبر حين يكون مستخدموك على شبكات محمولة في القاهرة أو الرياض أو دبي. لقد بنيت عدة مواقع عربية الأولوية بـ Next.js وكل واحدة علّمتني شيئًا جديدًا. هذا الدليل يجمع كل ما أعرفه.

لماذا Next.js للمواقع العربية؟

Next.js هو الاختيار الصحيح للمواقع العربية لأسباب تتجاوز مزايا React المعتادة. التوجيه i18n المدمج يتعامل مع بادئات المسار /ar و/en تلقائيًا. التصيير من جانب الخادم (SSR) يضمن أن المحتوى العربي موجود في HTML الأولي — وهذا حيوي لـ SEO لأن محركات البحث العربية (ومزحفات جوجل العربية) تحتاج قراءة محتواك بدون تنفيذ JavaScript. نظام التخطيط في App Router يجعل من السهل تغليف مسارات اللغات المختلفة في سمات lang وdir مختلفة.

إعداد RTL: الطريقة الصحيحة

الطريقة الخاطئة هي إضافة dir="rtl" عامًا ثم تجاوز كل شيء بحلول margin وpadding. الطريقة الصحيحة هي استخدام CSS Logical Properties من البداية، والتحكم بـ dir على مستوى <html> لكل locale:

// app/[locale]/layout.tsx
export default function LocaleLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: 'en' | 'ar' };
}) {
  const isRTL = locale === 'ar';
  return (
    <html lang={locale} dir={isRTL ? 'rtl' : 'ltr'}>
      <body>{children}</body>
    </html>
  );
}

إعداد i18n

App Router في Next.js 15 يتعامل مع i18n بدون مكوّن إضافي. للترجمات، أفضّل نهج ملفات JSON البسيط مع hook useTranslation مكتوب بالنوع على جلب مكتبة كاملة مثل next-intl للمواقع الصغيرة:

// middleware.ts — إعادة توجيه / إلى /ar أو /en بناءً على Accept-Language
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const hasLocale = ['en', 'ar'].some(
    locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );
  if (hasLocale) return;

  const acceptLanguage = request.headers.get('accept-language') ?? '';
  const preferArabic = acceptLanguage.startsWith('ar');

  return NextResponse.redirect(
    new URL(`/${preferArabic ? 'ar' : 'en'}${pathname}`, request.url)
  );
}

// lib/translations.ts
import ar from '@/messages/ar.json';
import en from '@/messages/en.json';

const messages = { en, ar } as const;
type Locale = keyof typeof messages;

export function getTranslations(locale: Locale) {
  return messages[locale];
}

CSS Logical Properties — الأساس

هذا هو أهم قرار تقني في موقع RTL. الخصائص المادية في CSS مثل margin-left وpadding-right وborder-left مرتبطة باتجاه معين وتنهار في RTL. الخصائص المنطقية تُعيَّن إلى "start" و"end" بالنسبة لاتجاه النص الحالي:

/* خطأ — ينهار في RTL */
.card {
  margin-left: 1rem;
  padding-right: 1.5rem;
  text-align: left;
}

/* صحيح — يعمل في LTR وRTL معًا */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 1.5rem;
  text-align: start;
}

/* في Tailwind CSS v3.3+ */
/* ms-4 = margin-inline-start: 1rem */
/* pe-6 = padding-inline-end: 1.5rem */
/* border-s-2 = border-inline-start-width: 2px */
/* text-start = text-align: start */

الطباعة العربية

اختيار الخط العربي المناسب ليس قرارًا هامشيًا. خطوط العربية النظامية (كالافتراضي على iOS وAndroid) وظيفية لكنها ليست جميلة بالأحجام الكبيرة. للمواقع الاحترافية، حمّل خطًا عربيًا مخصصًا. توصياتي بحسب الاستخدام:

Tajawal — نظيف وعصري، ممتاز للنص الأساسي وعناصر الواجهة. يستخدمه هذا الموقع.
Cairo — أكثر شخصية قليلًا، رائع للعناوين والنسخ التسويقية.
IBM Plex Sans Arabic — مظهر احترافي وتقني، ممتاز للأدوات التطويرية ولوحات SaaS.
Noto Naskh Arabic — تقليدي وعالي القراءة للمحتوى الطويل.

// app/[locale]/layout.tsx
import { Tajawal } from 'next/font/google';

const tajawal = Tajawal({
  subsets: ['arabic'],
  weight: ['300', '400', '500', '700'],
  variable: '--font-arabic',
  display: 'swap',
});

/* globals.css */
[dir="rtl"] {
  font-family: var(--font-arabic);
  font-size: 1.05em;   /* النص العربي يستفيد من حجم أكبر قليلًا */
  line-height: 1.8;    /* الحروف العربية أطول، تحتاج مسافة سطر أكبر */
  letter-spacing: 0;   /* لا تضع letter-spacing موجبًا على النص العربي أبدًا */
}

التعامل مع النص ثنائي الاتجاه

أصعب سيناريو هو المحتوى ثنائي اللغة: وصف منتج عربي مع اسم علامة تجارية إنجليزية، أو مقال عربي مع مقتطفات كود إنجليزية. خوارزمية Unicode Bidirectional تتعامل مع معظم هذا تلقائيًا، لكن الأرقام وعلامات الترقيم والتنسيق المضمّن قد تسبب تشوهات بصرية:

// components/BidiText.tsx
export function BidiText({ children }: { children: React.ReactNode }) {
  return (
    <span style={{ unicodeBidi: 'plaintext' }} dir="auto">
      {children}
    </span>
  );
}

// للأرقام في السياق العربي — استخدم LTR دائمًا
export function NumericValue({ value }: { value: string | number }) {
  return (
    <span dir="ltr" style={{ display: 'inline-block' }}>
      {value}
    </span>
  );
}

// الاستخدام:
// <p>المنتج: <BidiText>iPhone 16 Pro Max</BidiText></p>
// <p>السعر: <NumericValue value="٥٬٢٩٩ ريال" /></p>

التحقق من صحة النماذج العربية

نماذج الإدخال العربية تحتاج اهتمامًا خاصًا. تنسيقات أرقام الهواتف تختلف بالدولة (مصر: 01X-XXXX-XXXX، السعودية: 05X-XXXX-XXXX). الأسماء العربية قد تتضمن ألقابًا وأدوات تربك محققات Regex البسيطة. واتجاه حقول الإدخال يحتاج التبديل بناءً على ما يكتبه المستخدم:

// lib/validations-ar.ts
import { z } from 'zod';

export const arabicNameSchema = z
  .string()
  .min(2, 'الاسم يجب أن يكون حرفين على الأقل')
  .regex(/^[\u0600-\u06FF\s\u064B-\u065F']+$/, 'الاسم يجب أن يحتوي على أحرف عربية فقط');

export const saudiPhoneSchema = z
  .string()
  .regex(/^(05|5)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/, 'رقم الهاتف السعودي غير صحيح');

export const egyptianPhoneSchema = z
  .string()
  .regex(/^(01)[0-9]{9}$/, 'رقم الهاتف المصري غير صحيح');

تحسين محركات البحث للمواقع العربية

لـ SEO العربي متطلبات خاصة. الأهم: استخدم روابط hreflang البديلة لكل صفحة، وتأكد أن محتواك العربي مقدَّم كنص حقيقي (لا صور للنص). عمليات البحث العربية على جوجل لها أنماط كلمات مفتاحية مختلفة — المستخدمون العرب غالبًا يستخدمون الفصحى أو العامية الجزئية في البحث. استخدم Google Keyword Planner مع تحديد اللغة العربية للبحث بشكل صحيح.

// app/[locale]/page.tsx
export async function generateMetadata({ params: { locale } }): Promise<Metadata> {
  const isAr = locale === 'ar';
  return {
    title: isAr
      ? 'متجر الإلكترونيات — أفضل الأسعار في السعودية'
      : 'Electronics Store — Best Prices in Saudi Arabia',
    description: isAr
      ? 'اكتشف أحدث الأجهزة بأسعار تنافسية مع توصيل سريع لجميع مناطق المملكة'
      : 'Discover the latest electronics with fast delivery across Saudi Arabia',
    alternates: {
      canonical: `https://example.com/${locale}`,
      languages: {
        'ar-SA': 'https://example.com/ar',
        'en-US': 'https://example.com/en',
      },
    },
    openGraph: {
      locale: isAr ? 'ar_SA' : 'en_US',
      alternateLocale: isAr ? 'en_US' : 'ar_SA',
    },
  };
}

الأخطاء الشائعة التي يجب تجنبها

بعد بناء عدة مواقع عربية، هذه هي الأخطاء التي أراها مرارًا:

تطبيق letter-spacing على النص العربي. الخط العربي مكتوب بشكل متصل — الحروف تتصل ببعضها. المسافة بين الحروف تكسر هذه الاتصالات وتجعل النص يبدو مكسورًا. اضبط دائمًا letter-spacing: 0 للعربية.
استخدام CSS transforms لقلب الأيقونات. الأيقونات ذات الاتجاه (أسهم، chevrons) يجب أن تنقلب في RTL. استخدم: transform: scaleX(-1) بشكل شرطي.
نسيان قلب ترتيب flex/grid. Flexbox وGrid يحترمان سمة dir، لكن فقط إن استخدمت flex-start/flex-end لا left/right.
عدم الاختبار بمحتوى عربي فعلي. النص الإنجليزي التجريبي لا يكشف أخطاء تخطيط RTL. استخدم محتوى عربيًا حقيقيًا في التطوير منذ اليوم الأول.

الأداء لجمهور منطقة الشرق الأوسط وشمال أفريقيا

الإنترنت المحمول في السعودية ومصر سريع (تغطية 4G/5G عالية)، لكن المستخدمين حساسون لمؤشرات Core Web Vitals لأنهم يقارنون التجارب عبر التطبيقات العالمية. الخطوط العربية أكبر عادةً من اللاتينية لغنى مجموعة الأحرف. تحسينان بعينهما مهمان هنا:

أولًا، قسّم (subset) خطوطك العربية لتشمل فقط كتل Unicode التي تحتاجها. تكامل next/font مع Google Fonts يتعامل مع هذا تلقائيًا عند استخدام subsets: ['arabic'].

ثانيًا، قم بـ preload لخطك العربي لصفحات اللغة العربية. LCP ناتج عن تحميل متأخر للخط العربي مشكلة شائعة.

الاستضافة لمنطقة الشرق الأوسط وشمال أفريقيا

للمواقع العربية التي تستهدف السعودية ومصر، قرب شبكة الحافة مهم. شبكة Vercel Edge لديها نقاط في المنطقة وهي توصيتي الافتراضية لنشر Next.js. Cloudflare Pages بديل قوي. إن احتجت تحكمًا أكبر، AWS لديها مراكز بيانات في البحرين (me-south-1) والإمارات (me-central-1) مما يعطيك زمن استجابة أقل من 50ms لمعظم مستخدمي الخليج. لحركة المرور المصرية، شبكة Cloudflare أداؤها عادةً أفضل من AWS بسبب وجود نقاط اتصال متعددة عبر شمال أفريقيا.