Sub-path routing for locales in NextJS - Performance & Optimization

Performance: Sub-path routing for locales

MEDIUM IMPACT

This affects the initial page load speed and routing responsiveness by adding locale prefixes to URLs.

Implementing locale-based routing in a Next.js app

NextJS

module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es'],
    defaultLocale: 'en',
    localeDetection: true
  }
};

// Next.js built-in sub-path routing configured in next.config.js
// Pages are automatically served under /en, /fr, /es prefixes

Next.js handles locale routing natively, avoiding manual redirects and reducing server load.

📈 Performance GainEliminates redirect delay, improves LCP by 100-200ms

Implementing locale-based routing in a Next.js app

NextJS

export async function getServerSideProps(context) {
  const locale = context.req.headers['accept-language']?.split(',')[0] || 'en';
  if (!context.params.locale) {
    return {
      redirect: {
        destination: `/${locale}${context.resolvedUrl}`,
        permanent: false
      }
    };
  }
  return { props: {} };
}

// No built-in Next.js locale routing used

Manually redirecting based on Accept-Language header causes extra server-side redirects and delays initial page load.

📉 Performance CostBlocks rendering for 100-200ms due to redirect and extra server processing

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual locale redirects	No extra DOM nodes	Triggers 1 reflow due to redirect	Blocks paint until redirect completes	[X] Bad
Next.js built-in sub-path routing	No extra DOM nodes	Single reflow on initial load	Paints immediately after routing	[OK] Good

Rendering Pipeline

Locale sub-path routing affects the routing stage before rendering. The browser requests a URL with a locale prefix, Next.js matches the route and loads the correct locale data before rendering.

→Routing

→Server-side Rendering

→Client-side Hydration

⚠️ BottleneckRouting and server-side rendering can delay initial content if redirects or locale detection are done inefficiently.

Core Web Vital Affected

LCP

This affects the initial page load speed and routing responsiveness by adding locale prefixes to URLs.

Optimization Tips

1Avoid manual redirects for locale detection; use Next.js built-in sub-path routing.

2Configure locales in next.config.js to enable automatic routing prefixes.

3Reducing redirects improves Largest Contentful Paint (LCP) and user experience.

Performance Quiz - 3 Questions

What is a main performance drawback of manually redirecting users to locale sub-paths based on Accept-Language header?

A It increases the number of DOM nodes on the page.

B It causes extra server-side redirects that delay initial page load.

C It reduces the bundle size significantly.

D It improves client-side hydration speed.

DevTools: Performance

How to check: Record a page load with locale sub-path routing enabled. Look for any redirect events or delays before the first contentful paint.

What to look for: Check for absence of redirect waterfall and faster Largest Contentful Paint (LCP) timing.

Practice

1. What is the main purpose of sub-path routing for locales in Next.js?

easy

A. To create separate apps for each language without sharing code.

B. To serve different language versions of the site using URL prefixes like /en or /fr.

C. To load all languages at once on the homepage.

D. To disable internationalization features in Next.js.

Solution

1. Step 1: Understand sub-path routing concept

   Sub-path routing uses URL parts like /en or /fr to show different language versions of the same site.

2. Step 2: Compare options

   Only To serve different language versions of the site using URL prefixes like /en or /fr. correctly describes this purpose. Other options describe unrelated or incorrect behaviors.

3. Final Answer:

   To serve different language versions of the site using URL prefixes like /en or /fr. -> Option B

4. Quick Check:

   Sub-path routing = URL prefixes for languages [OK]

Hint: Remember: sub-path routing adds language code in URL path [OK]

Common Mistakes:

• Thinking sub-path routing loads all languages at once
• Confusing sub-path routing with separate apps per language
• Believing it disables i18n features

2. Which is the correct way to configure supported locales in next.config.js for sub-path routing?

easy

A. "i18n: ['en', 'fr'], defaultLocale: 'en'"

B. "locales: ['en', 'fr'], default: 'en'"

C. "i18n: { languages: ['en', 'fr'], defaultLang: 'en' }"

D. "i18n: { locales: ['en', 'fr'], defaultLocale: 'en' }"

Solution

1. Step 1: Recall Next.js i18n config structure

   The correct config uses the i18n object with locales array and defaultLocale string.

2. Step 2: Match options to correct syntax

   "i18n: { locales: ['en', 'fr'], defaultLocale: 'en' }" matches the exact syntax. Others use wrong keys or structure.

3. Final Answer:

   "i18n: { locales: ['en', 'fr'], defaultLocale: 'en' }" -> Option D

4. Quick Check:

   i18n config = locales + defaultLocale [OK]

Hint: Look for 'i18n' key with 'locales' and 'defaultLocale' [OK]

Common Mistakes:

• Using wrong keys like 'languages' or 'defaultLang'
• Not wrapping locales inside 'i18n' object
• Using arrays without keys

3. Given this Next.js page code snippet, what will be rendered if the URL is /fr?

import { useRouter } from 'next/router';
export default function Home() {
  const { locale } = useRouter();
  return <div>Current language: {locale}</div>;
}

medium

A. Current language: undefined

B. Current language: en

C. Current language: fr

D. Error: useRouter() not found

Solution

1. Step 1: Understand useRouter locale property

   The useRouter hook provides the current locale from the URL sub-path like /fr.

2. Step 2: Match URL to locale value

   Since URL is /fr, locale will be 'fr', so the rendered text is "Current language: fr".

3. Final Answer:

   Current language: fr -> Option C

4. Quick Check:

   URL /fr sets locale = 'fr' [OK]

Hint: Locale matches URL sub-path prefix [OK]

Common Mistakes:

• Assuming default locale always shows
• Thinking locale is undefined without explicit code
• Confusing useRouter hook usage

4. Identify the error in this Next.js next.config.js snippet for locale sub-path routing:

module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    localeDetection: true,
  },
};

medium

A. The config is correct and will enable sub-path routing with locale detection.

B. localeDetection is not a valid option inside i18n.

C. locales must include the default locale twice.

D. localeDetection should be localeDetection: false to enable sub-path routing.

Solution

1. Step 1: Check valid i18n config options

   Next.js supports localeDetection inside i18n to enable or disable automatic locale detection.

2. Step 2: Verify given config

   The config has valid keys and values. Setting localeDetection: true enables automatic detection, which is allowed.

3. Final Answer:

   The config is correct and will enable sub-path routing with locale detection. -> Option A

4. Quick Check:

   localeDetection is valid and true means enabled [OK]

Hint: Check Next.js docs for valid i18n keys [OK]

Common Mistakes:

• Thinking localeDetection is invalid
• Believing localeDetection must be false for sub-path routing
• Duplicating default locale in locales array

5. You want to create a Next.js app supporting English and French with sub-path routing. You want the default locale to be English and URLs like /fr/about to show French content. Which steps are needed to correctly configure this? A) Set i18n.locales to ['en', 'fr'] and defaultLocale to 'en' in next.config.js. B) Use useRouter() in pages to get locale and show language-specific content. C) Create folders or files under app or pages to handle routes for each locale. D) Disable locale detection to force manual locale switching.

hard

A. Only A, B, and C are needed.

B. All A, B, C, and D are needed.

C. Only A and B are needed.

D. Only B and D are needed.

Solution

1. Step 1: Configure locales and defaultLocale

   Setting i18n.locales and defaultLocale in next.config.js enables sub-path routing for English and French.

2. Step 2: Use useRouter to get locale and show content

   Using useRouter() to get locale helps render language-specific content dynamically.

3. Step 3: Organize routes for each locale

   Creating folders or files under app or pages supports localized routes like /fr/about.

4. Step 4: Evaluate locale detection setting

   Disabling locale detection is optional and not required to support sub-path routing correctly.

5. Final Answer:

   Only A, B, and C are needed. -> Option A

6. Quick Check:

   Locales config + useRouter + route files = correct setup [OK]

Hint: Remember: locale config + router + route files are key [OK]

Common Mistakes:

• Thinking disabling locale detection is mandatory
• Not creating route files for localized paths
• Ignoring useRouter for locale detection