Building a Multilingual Virtual Keyboard with Next.js — Supporting 100+ Languages

# nextjs# webdev# javascript# showdev
Building a Multilingual Virtual Keyboard with Next.js — Supporting 100+ Languagesyounes

Ever tried typing in Arabic, Thai, or Georgian on a standard QWERTY keyboard? It's painful. You...

Ever tried typing in Arabic, Thai, or Georgian on a standard QWERTY keyboard? It's painful. You either install system-level keyboard packs, use clunky OS settings, or hunt for sketchy websites covered in ads.

I built AnyKeyboard — a free online virtual keyboard supporting 100+ languages, from Arabic to Zulu. Here's how.

Why Build This?

The existing virtual keyboard landscape is dominated by a few players:

  • Lexilogos (110K monthly visitors) — functional but dated UI
  • Branah (46K) — decent coverage but ad-heavy
  • TypeIt (80K) — limited language support

None of them felt modern. None were built with Next.js or had proper SEO for every language. There was room for something better.

The Architecture

Stack:

  • Next.js 15 (Pages Router)
  • Vanilla JavaScript for keyboard interaction
  • CSS Grid for keyboard layouts
  • Vercel for hosting
  • AdSense for monetization

The key architectural decision was one page per keyboard. Each language gets its own URL:

/languages/middle-eastern/arabic-keyboard
/languages/east-asian/japanese-keyboard  
/languages/south-asian/hindi-keyboard
/languages/european/german-keyboard
Enter fullscreen mode Exit fullscreen mode

This is critical for SEO — someone searching "arabic keyboard online" lands directly on the Arabic keyboard page.

Keyboard Layout System

Each keyboard layout is a JSON file:

{
  "language": "Arabic",
  "direction": "rtl",
  "rows": [
    ["ض", "ص", "ث", "ق", "ف", "غ", "ع", "ه", "خ", "ح", "ج", "د"],
    ["ش", "س", "ي", "ب", "ل", "ا", "ت", "ن", "م", "ك", "ط"],
    ["ئ", "ء", "ؤ", "ر", "لا", "ى", "ة", "و", "ز", "ظ"]
  ],
  "shiftRows": [...]
}
Enter fullscreen mode Exit fullscreen mode

The rendering engine handles:

  • RTL languages (Arabic, Hebrew, Urdu, Farsi)
  • Complex scripts (Thai, Khmer, Myanmar with combining characters)
  • Large character sets (Chinese/Japanese with IME-style input)
  • Diacritics (Vietnamese, Czech with dead keys)

The RTL Challenge

Right-to-left languages were the trickiest part. It's not just about flipping the text direction — the entire UX needs to feel natural:

/* RTL keyboard layout */
.keyboard-container[dir="rtl"] {
  direction: rtl;
}

.keyboard-container[dir="rtl"] .output-area {
  text-align: right;
  direction: rtl;
  unicode-bidi: bidi-override;
}
Enter fullscreen mode Exit fullscreen mode

The cursor behavior, text selection, and copy/paste all needed special handling for RTL scripts.

SEO: The Growth Engine

With 100+ language pages, SEO was the primary growth strategy:

  1. Unique meta titles/descriptions per language
  2. Structured data (WebApplication schema for each keyboard)
  3. Hreflang tags for 86 supported locales
  4. Internal linking between related keyboards
  5. Programmatic content — each page includes typing tips, character references, and cultural context

Results after 3 months:

  • 645 clicks/month from Google (hockey stick growth)
  • 225 pages indexed out of 333 in sitemap
  • Top keywords: "arabic keyboard online" (position 4), "ukrainian keyboard" (position 7)

Handling Special Characters

Some keyboards need special input methods:

// Dead key support (for diacritics)
let pendingDeadKey = null;

function handleKeyPress(key) {
  if (isDeadKey(key)) {
    pendingDeadKey = key;
    return;
  }

  if (pendingDeadKey) {
    const combined = combineWithDeadKey(pendingDeadKey, key);
    pendingDeadKey = null;
    return insertText(combined);
  }

  insertText(key);
}

// Example: dead key ˆ + a = â
function combineWithDeadKey(dead, base) {
  const combinations = {
    'ˆ': { 'a': 'â', 'e': 'ê', 'i': 'î', 'o': 'ô', 'u': 'û' },
    '¨': { 'a': 'ä', 'e': 'ë', 'i': 'ï', 'o': 'ö', 'u': 'ü' },
    // ... more combinations
  };
  return combinations[dead]?.[base] || base;
}
Enter fullscreen mode Exit fullscreen mode

Monetization: AdSense + Affiliates

The revenue model is simple:

  • AdSense — display ads on keyboard pages (high traffic, global audience)
  • Amazon Affiliates — recommend physical keyboards and keyboard stickers for each language

For example, the Arabic keyboard page shows Arabic keyboard stickers on Amazon. The Hindi page shows Hindi stickers. Each recommendation is contextual.

What I Learned

  1. Programmatic SEO works — 100+ pages targeting long-tail keywords compounds over time
  2. Unicode is hard — every script has edge cases (combining characters, ligatures, ZWJ sequences)
  3. RTL is harder than you think — it affects layout, cursor behavior, and copy/paste
  4. Users want simplicity — no signup, no install, just type
  5. Speed matters — keyboard input must feel instant (<16ms response)

Try It

🌐 AnyKeyboard.io — Free virtual keyboards for 100+ languages

No account needed. Pick a language, start typing, copy your text. That's it.

Some popular keyboards:

Working with non-Latin scripts in your projects? What's been your biggest Unicode headache? I'd love to hear your war stories in the comments.