Locale detection strategies in NextJS - Performance & Optimization

Performance: Locale detection strategies

MEDIUM IMPACT

Locale detection affects the initial page load speed and user interaction responsiveness by determining which language content to serve.

Detect user locale to serve localized content on first page load

NextJS

import React from 'react';

export default function Page() {
  const [locale, setLocale] = React.useState('en');
  React.useEffect(() => {
    const userLocale = navigator.language || 'en';
    setLocale(userLocale);
  }, []);
  return <div>{`Locale is ${locale}`}</div>;
}

Detecting locale on client side after initial render avoids blocking server response, improving LCP.

📈 Performance GainNon-blocking locale detection, reduces server response delay by 100-200ms

Detect user locale to serve localized content on first page load

NextJS

export async function getServerSideProps(context) {
  const locale = context.req.headers['accept-language']?.split(',')[0] || 'en';
  return { props: { locale } };
}

export default function Page({ locale }) {
  return <div>{`Locale is ${locale}`}</div>;
}

Detecting locale on every server request blocks rendering until locale is parsed, increasing server response time and delaying LCP.

📉 Performance CostBlocks rendering for 100-200ms on server, increasing LCP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Server-side locale detection on every request	Minimal	Blocks rendering until locale resolved	Delays paint by 100-200ms	[X] Bad
Client-side locale detection after initial render	Minimal	No blocking reflows	Paints immediately, updates locale after	[OK] Good
Server-side cookie locale detection	Minimal	Blocks rendering briefly	Adds ~50ms delay to paint	[!] OK
Client-side cookie locale detection	Minimal	No blocking reflows	Paints immediately, updates locale after	[OK] Good
Static locale detection with i18n routing	Minimal	No runtime reflows	Paints immediately with correct locale	[OK] Good

Rendering Pipeline

Locale detection affects the server response time and initial HTML content, influencing the browser's style calculation and layout stages during first paint.

→Server Response

→Style Calculation

→Layout

→Paint

⚠️ BottleneckServer Response time due to blocking locale detection logic

Core Web Vital Affected

LCP

Locale detection affects the initial page load speed and user interaction responsiveness by determining which language content to serve.

Optimization Tips

1Avoid blocking server-side locale detection on every request to improve LCP.

2Use client-side locale detection after initial render to prevent server delays.

3Leverage static generation with locale params to eliminate runtime locale detection costs.

Performance Quiz - 3 Questions

Which locale detection strategy best improves Largest Contentful Paint (LCP) in Next.js?

A Detect locale on client side after initial render

B Detect locale on every server request using getServerSideProps

C Detect locale by reading cookies on server side every request

D Detect locale by parsing Accept-Language header on server side

DevTools: Performance

How to check: Record a page load in DevTools Performance panel. Look for long server response times and delays before first paint.

What to look for: Check if server response blocks rendering and if locale detection delays Largest Contentful Paint.

Practice

1. What is the main purpose of locale detection in a Next.js application?

easy

A. To change the website layout based on screen size

B. To improve server response time by caching pages

C. To track user clicks for analytics

D. To automatically show the website in the user's preferred language

Solution

1. Step 1: Understand locale detection purpose

   Locale detection is used to identify the user's language preference automatically.

2. Step 2: Match purpose to options

   Showing the website in the user's preferred language matches the purpose of locale detection.

3. Final Answer:

   To automatically show the website in the user's preferred language -> Option D

4. Quick Check:

   Locale detection = show preferred language [OK]

Hint: Locale detection means showing language automatically [OK]

Common Mistakes:

• Confusing locale detection with performance optimization
• Thinking it changes layout instead of language
• Mixing locale detection with analytics tracking

2. Which Next.js feature is commonly used to configure supported locales for automatic detection?

easy

A. next.config.js i18n field

B. pages/api/locale.js file

C. Custom _document.js file

D. Static CSS files

Solution

1. Step 1: Identify where locale config is set

   Next.js uses the i18n field inside next.config.js to define supported locales.

2. Step 2: Check other options

   API files, _document.js, and CSS files do not configure locales.

3. Final Answer:

   next.config.js i18n field -> Option A

4. Quick Check:

   Locale config = next.config.js i18n [OK]

Hint: Locales go in next.config.js under i18n [OK]

Common Mistakes:

• Trying to configure locales in API routes
• Using _document.js for locale settings
• Assuming CSS files control language

3. Given this middleware snippet in Next.js, what happens when a user with 'fr' browser language visits the site?

export function middleware(request) {
  const locale = request.headers.get('accept-language')?.split(',')[0].split('-')[0];
  if (locale === 'fr') {
    return Response.redirect(new URL('/fr', request.url));
  }
  return Response.next();
}

medium

A. User is redirected to the homepage

B. User is redirected to the /fr page

C. User gets a 404 error

D. User stays on the current page without redirect

Solution

1. Step 1: Analyze locale extraction from headers

   The code extracts the first language code from the 'accept-language' header, e.g., 'fr'.

2. Step 2: Check redirect condition

   If locale is 'fr', the middleware redirects to '/fr' URL.

3. Final Answer:

   User is redirected to the /fr page -> Option B

4. Quick Check:

   Locale 'fr' triggers redirect to /fr [OK]

Hint: Check header locale then redirect if matches [OK]

Common Mistakes:

• Ignoring the redirect and assuming no change
• Confusing header parsing logic
• Assuming redirect to homepage always

4. Identify the error in this Next.js middleware code for locale detection:

export function middleware(request) {
  const locale = request.headers.get('accept-language').split(',')[0];
  if (locale === 'en') {
    return Response.redirect(new URL('/en', request.url));
  }
  return Response.next();
}

medium

A. Missing optional chaining on headers.get could cause runtime error

B. Redirect URL is incorrect, should be '/en-US'

C. Response.next() is not a valid method

D. Locale comparison should use locale.includes('en')

Solution

1. Step 1: Check headers.get usage

   headers.get('accept-language') can return null if header missing, so calling split() without check causes error.

2. Step 2: Identify fix

   Using optional chaining like headers.get('accept-language')?.split(',')[0] prevents runtime error.

3. Final Answer:

   Missing optional chaining on headers.get could cause runtime error -> Option A

4. Quick Check:

   Null header needs optional chaining [OK]

Hint: Always check headers.get may return null [OK]

Common Mistakes:

• Assuming headers.get always returns string
• Incorrect redirect URL format
• Using invalid Response methods

5. You want to detect user locale in Next.js by checking cookie first, then header, and fallback to default 'en'. Which code snippet correctly implements this logic in middleware?

hard

A. const locale = 'en' || request.cookies.get('NEXT_LOCALE') || request.headers.get('accept-language');

B. const locale = request.headers.get('accept-language')?.split(',')[0].split('-')[0] || request.cookies.get('NEXT_LOCALE') || 'en';

C. const locale = request.cookies.get('NEXT_LOCALE') || request.headers.get('accept-language')?.split(',')[0].split('-')[0] || 'en';

D. const locale = request.cookies.get('NEXT_LOCALE') && request.headers.get('accept-language') || 'en';

Solution

1. Step 1: Understand priority order

   We want to check cookie first, then header, then default 'en'.

2. Step 2: Analyze each option

   const locale = request.cookies.get('NEXT_LOCALE') || request.headers.get('accept-language')?.split(',')[0].split('-')[0] || 'en'; checks cookie first, then header with safe optional chaining, then 'en'. Others have wrong order or logic.

3. Final Answer:

   const locale = request.cookies.get('NEXT_LOCALE') || request.headers.get('accept-language')?.split(',')[0].split('-')[0] || 'en'; -> Option C

4. Quick Check:

   Cookie first, then header, then default [OK]

Hint: Use || in order: cookie, header, default [OK]

Common Mistakes:

• Checking header before cookie
• Using && instead of || causing wrong logic
• Missing optional chaining on header