Locale detection strategies in NextJS

Introduction

Locale detection helps your website show content in the right language automatically. It makes visitors feel welcome by speaking their language without asking them.

When you want your website to show different languages based on visitor location.

When you want to remember a user's language choice for future visits.

When you want to redirect users to the correct language version of your site automatically.

When you want to improve user experience by showing content in their preferred language.

When you want to support multiple languages without making users pick manually every time.

Syntax

NextJS

export const middleware = (request) => {
  const locale = request.nextUrl.locale || 'en';
  // Your locale detection logic here
  return NextResponse.next();
};

This example shows a basic middleware function in Next.js to detect locale.

You can access the locale from the request URL or headers.

Examples

This example reads the browser's language preference from headers and rewrites the URL to use that locale.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const acceptLanguage = request.headers.get('accept-language');
  const locale = acceptLanguage?.split(',')[0].split('-')[0] || 'en';
  const url = request.nextUrl.clone();
  url.locale = locale;
  return NextResponse.rewrite(url);
}

This example checks if the user has a saved locale in cookies and uses it to set the locale.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const cookieLocale = request.cookies.get('NEXT_LOCALE')?.value;
  const locale = cookieLocale || 'en';
  const url = request.nextUrl.clone();
  url.locale = locale;
  return NextResponse.rewrite(url);
}

This example redirects users to the default locale if none is set in the URL.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  if (!url.locale || url.locale === 'default') {
    url.locale = 'en';
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

Sample Program

This middleware tries to detect the user's locale by first checking a cookie, then the browser's language header, and finally defaults to English. It redirects the user to the URL with the correct locale if needed.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  // Try to get locale from cookie
  const cookieLocale = request.cookies.get('NEXT_LOCALE')?.value;

  // If no cookie, get from Accept-Language header
  const acceptLanguage = request.headers.get('accept-language');
  const headerLocale = acceptLanguage?.split(',')[0].split('-')[0];

  // Decide locale: cookie > header > default
  const locale = cookieLocale || headerLocale || 'en';

  // Clone URL and set locale
  const url = request.nextUrl.clone();
  url.locale = locale;

  // Redirect to URL with locale if different
  if (request.nextUrl.locale !== locale) {
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

Important Notes

Always provide a default locale to avoid errors.

Use cookies to remember user language choices for better experience.

Check browser headers carefully as they can contain multiple languages.

Summary

Locale detection helps show the right language automatically.

You can detect locale from cookies, headers, or URL.

Next.js middleware is a good place to handle locale detection and redirects.