language function does not return the expected language in nextjs middleware

[kaganAhmetOkan]

in middleware.js:

const locales = ["en", "tr"];
const negotiator = new Negotiator(request);
const locale = negotiator.language(locales);

curl -v --header "Accept-Language: tr" localhost:3000 redirects me to /en regardless of the accept-language header.

The whole middleware:

import Negotiator from "negotiator";

const locales = ["en", "tr"];

export function middleware(request) {
  const { pathname } = request.nextUrl;
  const pathnameHasLocale = locales.some(
    locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );

  if (pathnameHasLocale) return;

  const negotiator = new Negotiator(request);
  const locale = negotiator.language(locales);
  request.nextUrl.pathname = `/${locale}${pathname}`;
  return Response.redirect(request.nextUrl);
};

export const config = {
  matcher: ["/((?!_next).*)"],
};

I don't really understand what I'm getting wrong here. Excuse me if I'm missing something very simple.

[dougwilson]

Unfortunately it doesn't look like the request object from NextJS there is in the format this module is expecting (the type from Node.js)

[jmagrippis]

Hey @kaganAhmetOkan. The Next.js team kinda shows what could be done in these docs, but not really: https://nextjs.org/docs/app/building-your-application/routing/internationalization

Like @dougwilson says, the Next.js request object isn't compatible, but you can just pass the headers to Negotiator. So you could do something like:

const locales = ['en', 'tr'];
let locale = 'en' // your default locale
const languageHeaders = request.headers.get('Accept-Language')
if (languageHeaders) {
  locale = new Negotiator({
    headers: {'accept-language': languageHeaders},
  }).language(locales)
}

[kaganAhmetOkan]

Hey @kaganAhmetOkan. The Next.js team kinda shows what could be done in these docs, but not really: https://nextjs.org/docs/app/building-your-application/routing/internationalization

Like @dougwilson says, the Next.js request object isn't compatible, but you can just pass the headers to Negotiator. So you could do something like:

const locales = ['en', 'tr'];
let locale = 'en' // your default locale
const languageHeaders = request.headers.get('Accept-Language')
if (languageHeaders) {
  locale = new Negotiator({
    headers: {'accept-language': languageHeaders},
  }).language(locales)
}

Hey @jmagrippis, thank you for your help. I had not thought about passing the accept-language header directly. .language(locales) returns undefined when there is no available language. So, I've ended up using this block of code for anyone in the future:

const locales = ["en", "tr"];
const defaultLocale = "en";
const languageHeaders = request.headers.get("Accept-Language");
const locale = new Negotiator({ headers: {"accept-language": languageHeaders }}).language(locales);

return locale ?? defaultLocale;