Fix: correct <html lang> and localize the <head> description per locale
The root (main)/layout renders <html> ABOVE the [locale] segment, so next-intl's getLocale() returns the default locale there - emitting <html lang="en"> on every page regardless of UI language (e.g. /de) and a hardcoded English <head> description. Both are strong "translate this page" triggers in Chrome. proxy.ts already exposes the nonce to server components via the x-middleware-request-* mechanism; expose the request pathname the same way as x-pathname, and have the root layout derive the locale from it (falling back to getLocale() when the path has no locale segment) for both <html lang> and the localized meta_description (new key in all 17 locales; the English value is unchanged).
This commit is contained in:
@@ -143,11 +143,15 @@ export async function proxy(request: NextRequest) {
|
||||
const response = intlResponse ?? NextResponse.next();
|
||||
|
||||
const existing = response.headers.get("x-middleware-override-headers");
|
||||
response.headers.set(
|
||||
"x-middleware-override-headers",
|
||||
existing ? `${existing},x-nonce` : "x-nonce"
|
||||
);
|
||||
// Expose the nonce AND the request pathname to server components as request
|
||||
// headers. The root (main)/layout renders <html> ABOVE the [locale] segment,
|
||||
// so getLocale() can't resolve the active locale there and falls back to the
|
||||
// default - emitting <html lang="en"> on e.g. /de pages, which makes browsers
|
||||
// offer to "translate this page". The layout reads x-pathname to recover it.
|
||||
const overrides = [existing, "x-nonce", "x-pathname"].filter(Boolean).join(",");
|
||||
response.headers.set("x-middleware-override-headers", overrides);
|
||||
response.headers.set("x-middleware-request-x-nonce", nonce);
|
||||
response.headers.set("x-middleware-request-x-pathname", pathname);
|
||||
|
||||
response.headers.set("X-Content-Type-Options", "nosniff");
|
||||
|
||||
|
||||
Reference in New Issue
Block a user