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.