Shipping an Arabic and English site that is fast, correct in RTL, and ranks in Saudi search follows a repeatable pattern: Next.js with a headless CMS holding translations, logical CSS for RTL, and strict SEO per locale.
This guide covers translation modeling, locale routing, RTL implementation, fonts, SEO, and caching for bilingual sites.
1. Content model that scales
Use base tables plus translation tables. For example articles plus articles_translations with languages_code, title, excerpt, content, and SEO fields. Never store Arabic and English in the same row. Always query with fallback. Requested locale first, then English.
Required rules are title and slug stable in English for URLs, H1 translated, excerpt translated, and SEO title plus description translated separately, not auto-copied. Editors should see missing-translation status in the list view. Add a validation that blocks publish when Arabic title is empty but English exists, or vice versa, unless marked as single-locale.
Media needs alt text per locale. A common Saudi mistake is English alt on Arabic pages, which hurts image search and accessibility.
2. Routing and rendering in Next.js
Use /[lang]/segments like /ar/articles/slug and /en/articles/slug. Generate static params for both locales at build time for the top pages, and use ISR with 1-hour revalidate for the long tail. This keeps builds fast while content stays fresh.
Set html lang and dir per request. For ar-SA set lang ar and dir rtl. For en-US set lang en and dir ltr. Do this in the root layout, not with client JS, so crawlers and screen readers get it on first paint.
Locale detection should respect explicit choice via cookie first, then Accept-Language, then default to ar-SA for sa. domains. Never redirect Googlebot aggressively. Use hreflang instead of forced redirects.
3. RTL with Tailwind the right way
Use logical properties everywhere. Margins with ms and me, padding with ps and pe, text alignment with text-start and text-end, borders with border-s and border-e. Never use ml, mr, pl, pr, text-left, or text-right in new code. They break in RTL.
Flip directional icons with rtl:rotate-180 for arrows, chevrons, and progress indicators. Do not flip logos, clocks, or media play buttons. Test with both locales open side by side.
Forms need special care. Labels above inputs work in both directions. Placeholders in Arabic with English example values need dir auto on the input. Numbers, prices in SAR, and phone numbers like +9665 should use dir ltr inside RTL pages to avoid digit reordering.
Tables, timelines, and steppers must mirror. The first step starts from the right in Arabic. Carousels swipe right-to-left. These details decide whether the site feels native or translated.
4. Fonts and performance
Arabic fonts are heavy. Subset Tajawal or IBM Plex Sans Arabic to Arabic plus Latin, use font-display swap, and preconnect to your font CDN. Self-host fonts on your domain to avoid third-party delays.
Keep LCP under 2.5 seconds on 4G in Dammam and Jeddah. Images need AVIF with Arabic alt, lazy loading below the fold, and explicit width and height to avoid CLS. Cache CMS responses in Redis with 5-minute TTL plus webhook revalidation on publish.
Measure with PageSpeed Insights set to Middle East plus WebPageTest on mobile. Lab scores in Europe lie about Saudi 4G.
5. SEO per locale that ranks
Hreflang for ar-SA and en-US plus x-default on every page. Canonical per locale to itself. Separate sitemaps at /ar/sitemap.xml and /en/sitemap.xml. Titles 50 to 60 characters in each language, descriptions 150 to 160, no machine translation without review.
Keep slugs in English for stability like /articles/quantum-safe-migration-checklist. Put Arabic in H1 and title tag. Arabic slugs cause encoding, sharing, and analytics issues. One client switched from Arabic slugs to English and saw 18 percent higher CTR from cleaner URLs in WhatsApp shares.
Add FAQ and Article schema in the page language, local business markup with SAR prices and Dammam address, and reviews in Arabic. This wins rich results in Saudi SERPs.
Avoid mixed-language titles where an English word like beyond appears inside an Arabic title. It tanks CTR. We fixed two such titles and saw immediate improvement.
6. Caching and webhooks
Cache strategy is stale-while-revalidate for listing pages, ISR for detail pages, and no-store for preview drafts. Webhook on content publish should purge Redis keys by slug and trigger Next.js revalidateTag for that lang plus slug.
Preview mode needs auth plus draft fetch bypassing cache, with a banner showing language and status. Editors in Riyadh should be able to share a preview link on WhatsApp that works without login expiry tricks.
Bottom line is model translations cleanly, route by lang, style with logical properties, and treat SEO as two sites that share components. Do this once and every new bilingual site is configuration, not reinvention.
