Bilingual EN/FR by default — implementation notes

Most multilingual sites I've seen are English-first with a French translation layered on later — and the seams show. We wanted EN and FR to be peers from day one.

URL-prefix routing

Every URL begins with the locale: /en/about, /fr/about. No domain switching, no subdomains. next-intl middleware handles the redirect on first visit, persists the choice in NEXT_LOCALE, and emits the right hreflang tags.

Localized fields in Firestore

Every content document carries both translations as sibling fields: title.en and title.fr. Renders read the active locale and fall back to en with a small dev-mode badge if the FR field is missing. No separate French collection, no translation drift.

The +25% width rule

French is, on average, 25% wider than English for the same text. Every component is designed with that headroom — buttons, nav items, hero copy — so the FR version doesn't break the layout.