How would you implement slug-based routing that also supports localization? (e.g. /en/products/shoes vs /fr/produits/chaussures)

The next-intl library provides a more complete solution for internationalization, including routing, translations, and locale management. It integrates seamlessly with Next.js App Router and handles the complexity of localized routes, including slug translation. You define your routing configuration, and next-intl provides middleware for locale negotiation and components for navigation that automatically handle translated paths [citation:2]. This approach gives you both the locale prefix routing and the ability to manage translated content through your data layer.

For projects that need fully static, pre-generated routes with translated slugs, next-roots offers an alternative approach. Instead of using dynamic [locale] segments, it generates actual folders for each language at build time. You maintain your original routes in a roots folder, and next-roots creates language-specific routes (e.g., (en)/products/shoes and fr/produits/chaussures) by reading translation files. This approach gives you the full benefits of static generation and type-safe links, but requires running a generation step whenever routes or translations change [citation:3][citation:6].

Regardless of which routing approach you choose, you need a strategy for slug translation in your data layer. The Contentful documentation demonstrates fetching content based on both locale and slug parameters, where each content entry stores its slug for each supported language [citation:7]. In your API or database, you should store a mapping of (locale, slug) → contentId or include all language slugs on each content item. This allows your getProductBySlug(slug, locale) function to retrieve the correct content regardless of which language's slug is used in the URL [citation:7].