The Big Idea
Discover how a simple URL structure can save you hours of confusing link fixes!
0
0
Why Sub-path routing for locales in NextJS? - Purpose & Use Cases
The Scenario
Imagine building a website that supports English and Spanish. You try to handle language switching by manually creating separate pages like /home-en and /home-es and linking them everywhere.
The Problem
This manual approach quickly becomes confusing and error-prone. You must remember to update links everywhere, and users can get lost if URLs are inconsistent. It's hard to keep track of which page belongs to which language.
The Solution
Sub-path routing for locales automatically organizes your site URLs by language, like /en/home and /es/home. Next.js handles the routing and language detection, so you don't have to manage links manually.
Before vs After
✗ Before
if (lang === 'en') { router.push('/home-en') } else { router.push('/home-es') }
✓ After
router.push(`/${locale}/home`)What It Enables
This makes your site easier to maintain and provides a smooth, consistent experience for users switching languages.
Real Life Example
A global company website where visitors automatically see content in their language with URLs like /en/products or /es/productos, improving clarity and SEO.
Key Takeaways
Manual language URL handling is confusing and error-prone.
Sub-path routing organizes URLs by locale automatically.
It simplifies maintenance and improves user experience.