Getting started · severity 9/12
Vietnamese on a first visit
Problem
Chưa có tiếng Việt mặc định
A browser that has never chosen a language gets the computer's language, and office machines are set to English, so new Vietnamese users start on an English screen.
Fix
With no saved language, the first page is Vietnamese. Once someone uses the language switch, their choice wins. Recorded as a fresh English browser.
Codeproblem fix
src/i18n/routing.ts
line 16
// stores that locale in the cookie below, so old links keep working.
localePrefix: "never",
// With no URL signal, the locale is decided in this order: the `NEXT_LOCALE`
// cookie, then the browser's `Accept-Language` on a first visit (a Vietnamese
// browser gets `vi`, anything else `en`), then `defaultLocale`.
// With no URL signal, the locale is decided by the `NEXT_LOCALE` cookie. A
// first visit has none, and the proxy then asks for Vietnamese whatever the
// browser's `Accept-Language` says (see `preferVietnameseOnFirstVisit`): the
// users are Vietnamese staff on English-language machines, and research found
// an English first screen is where new users stall. `defaultLocale` stays
// `en` for the sitemap and other request-less renders.
localeDetection: true,
// Remembers the choice per browser. The language switcher writes it on the
src/proxy.ts
line 1
import createMiddleware from "next-intl/middleware";
import type { NextRequest } from "next/server";
import { NextRequest } from "next/server";
import { buildReportOnlyCsp } from "@/config/csp";
line 15
const intlMiddleware = createMiddleware(routing);
const LOCALE_COOKIE = "NEXT_LOCALE";
/**
* A browser that has never chosen a language gets Vietnamese: next-intl would
* otherwise read `Accept-Language`, which is English on most office machines.
* Once the switcher (or this first response) writes the cookie, the cookie wins.
*/
export function preferVietnameseOnFirstVisit(req: NextRequest): NextRequest {
if (req.cookies.has(LOCALE_COOKIE)) {
return req;
}
const headers = new Headers(req.headers);
headers.set("accept-language", "vi");
return new NextRequest(req, { headers });
}
/**
* Resolves each request's locale from the `NEXT_LOCALE` cookie, then
* `Accept-Language`, and rewrites to `/<locale>/...` internally; a legacy
* Resolves each request's locale from the `NEXT_LOCALE` cookie, else
* Vietnamese, and rewrites to `/<locale>/...` internally; a legacy
* `/vi/...` URL redirects to the bare path and sets the cookie (see
* `i18n/routing.ts`). Also remembers the
line 28
*/
export default function proxy(req: NextRequest) {
const res = intlMiddleware(req);
const res = intlMiddleware(preferVietnameseOnFirstVisit(req));
if (!isProduction()) {
res.headers.set("X-Robots-Tag", "noindex, nofollow");