Feature/add next intl for localization #456
Conversation
|
Someone is attempting to deploy a commit to the medusajs Team on Vercel. A member of the Team first needs to authorize it. |
sseshaheen
changed the title
There was a problem hiding this comment.
Hey @sseshaheen,
thank you so much for the email you wrote me yesterday, asking for feedback on this PR! Medusa looks really cool, would be nice to have support for multiple languages!
I think you're on a good track, but there are a few areas where I think you could simplify the code significantly by aligning closer with what next-intl suggests. If in doubt, you might want to refer to the docs for getting started advice etc.
Hope this helps, let me know if you have a question!
As a side note (or rather a shameless plug), I'm currently working on learn.next-intl.dev. The course will be based on an ecommerce store, so quite related to this starter template and could be of help. It's not out yet though, just as a hint for the future!
src/middleware.ts
Outdated
| import createIntlMiddleware from "next-intl/middleware" | ||
| import { fallbackLng, intlConfig, languages } from "./lib/i18n/settings" | ||
|
|
||
| const intlMiddleware = createIntlMiddleware(intlConfig) |
There was a problem hiding this comment.
Currently, routing is done based on a pattern like [locale]/[countryCode].
For e-commerce stores, it's common to have either only the country code or optionally a locale following the country (e.g. /uk, /ch/fr, …).
I'd recommend to use custom prefixes in order to map a country code to a locale that can be used internally.
You'd have to change the currently used [countryCode] segment to [locale], but the public routes would stay the same. Additionally, you can retrieve the country code from the locale in your app code:
const locale = new Intl.Locale('fr-CH');
locale.region; // 'CH')| </span> | ||
| <span className="font-semibold"> | ||
| Total amount | ||
| {t(k.TOTAL_AMOUNT)} | ||
| </span> | ||
| <span data-testid="order-created-date"> | ||
| {new Date(order.created_at).toDateString()} |
There was a problem hiding this comment.
next-intl has utilities for formatting dates, numbers and more via useFormatter. I'd really recommend using those as they will help to align formatting with the given locale.
This PR introduces robust localization and multi-language support to the
nextjs-starter-medusaproject usingnext-intl. The implementation builds on the work of el-buku but aligns with the latest main branch ofnextjs-starter-medusa. It also incorporates several improvements, including updated deprecated functions.Here is a summary of what was done:
1. Integration of next-intl:
Link,redirect,usePathnameanduseRouterto use centralized utilities from@lib/i18n/navigationfor consistent locale handling.2. Dynamic Translations for Text Strings:
t(k.KEY_NAME)to enable dynamic translations for user-facing text.import k from "@lib/i18n/translations/keys"import { useSafeTranslations } from "@lib/i18n/use-safe-translations"for client-side components, orimport { getTranslations } from "next-intl/server"for server-side components.3. Updated Folder Structure:
[countryCode]folder to[locale]for better organization and alignment with locale-aware routing.4. File Additions:
- @lib/i18n/settings.ts: Provides core localization settings, including supported languages (languages), fallback language (
fallbackLng), and cookie-based locale detection.- @lib/i18n/use-safe-translations.ts: Custom hook wrapping
useTranslationsfromnext-intl, adding graceful handling of missing translations and optional debugging withNEXT_PUBLIC_TRANSLATION_HELPERS.- @lib/i18n/navigation.ts: Centralized navigation utilities for locale-aware routing
- @lib/i18n/config-callback.ts: Handles dynamic locale resolution and translation loading
- @lib/i18n/request-config.js: Centralized locale configurations
- @lib/i18n/translations/keys.ts: Centralized translation keys for consistency and type safety
- @lib/i18n/translations/locales/*.ts: Locale-specific translation files for dynamic text handling