Conversation
…nguage Closes O2sa#126. When a user's preferred language was not the default `en` (e.g. `ar`), the page first rendered in English from the server, then re-rendered in Arabic on the client after `useEffect` finished detecting the locale via `navigator.language` and `localStorage`. The result was a flash of incorrect content plus a `<html lang/dir>` hydration mismatch. The fix runs detection on the server using cookies + `Accept-Language`, and the cookie is written by middleware so subsequent requests skip the detection round-trip. ## Changes - `middleware.ts` (new): on each request, if no valid `app-locale` cookie exists, parse `Accept-Language` and set the cookie in the response. Edge-safe; <1ms overhead per request. - `lib/i18n-core.ts` (new): server- and edge-safe constants and helpers (`supportedLocales`, `LOCALE_COOKIE`, `parseAcceptLanguage`, `isSupportedLocale`, `getLocaleDir`, `localeMeta`). No React, no DOM, so the middleware can import it. - `app/layout.tsx`: read the cookie via `cookies()` then fall through to `Accept-Language` via `headers()`. Set `<html lang>` and `<html dir>` on the initial server render and pass `initialLocale` down. - `app/providers.tsx`, `components/language-provider.tsx`: forward `initialLocale` to `useI18nProvider`. - `lib/i18n.ts`: the provider now seeds its initial state from `initialLocale` instead of running detection inside `useState`. When the user changes locale at runtime, both the cookie and localStorage are updated so the next reload renders correctly without a flash. Existing localStorage-stored preferences are still honored; the cookie is written whenever the locale changes so the client-side state and the server-side initial render converge over time. ## Verification `npx tsc --noEmit` is clean.
|
@mvanhorn is attempting to deploy a commit to the osama's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for the pull request! ✅ A maintainer will review this soon. Please be patient while we take a look. 🙌 |
Address codex review on O2sa#126: - parseAcceptLanguage now parses q-values (default 1.0 per RFC 9110 §12.5.4), drops q=0 (explicit rejection), and selects the highest-q supported language. Previously a header like 'en;q=0.1, ar;q=1' picked en because the loop scanned in textual order and ignored q. - middleware.ts now exports a matcher config that excludes _next/static, _next/image, /api, common static asset extensions, and crawl files. Asset and API responses no longer attach a Set-Cookie header and remain cacheable. Typecheck still clean.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
✨ Thank you, @mvanhorn! Another great contribution merged! 🚀 You've been a fantastic contributor! We truly appreciate your continued support. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #126.
Problem
When a user's preferred language was not the default
en(e.g.ar), the page first rendered in English from the server, then re-rendered in Arabic on the client afteruseEffectfinished detecting the locale vianavigator.languageandlocalStorage. Result: flash of incorrect content +<html lang/dir>hydration mismatch.Fix
Detect on the server using cookies +
Accept-Language, write the cookie via middleware, and seed the React provider with the resolved locale so client detection no longer runs inuseEffect.Files
middleware.ts(new): on each request, if no validapp-localecookie exists, parseAccept-Languageand set the cookie in the response. <1ms overhead per request.lib/i18n-core.ts(new): server- and edge-safe constants and helpers (supportedLocales,LOCALE_COOKIE,parseAcceptLanguage,isSupportedLocale,getLocaleDir,localeMeta). No React, no DOM, so the middleware can import it.app/layout.tsx: readcookies()then fall through toheaders()Accept-Language. Set<html lang>and<html dir>on the initial server render and passinitialLocaledown.app/providers.tsx,components/language-provider.tsx: forwardinitialLocaletouseI18nProvider.lib/i18n.ts: provider seeds initial state frominitialLocaleinstead of running detection insideuseState. When the user changes locale at runtime, both the cookie andlocalStorageare written so the next reload renders correctly without a flash. Re-exports the i18n-core surface so existing imports continue to work.Existing localStorage-stored preferences are still honored; the cookie is now the SSR-friendly persistence and gets updated on every locale change so client + server converge.
Verification
npx tsc --noEmitis clean. The dev server hits<html lang="ar" dir="rtl">on first response whenAccept-Language: aris present (cookie absent), and on every subsequent request after the cookie is set.