Remix & Hydrogen i18n
Storefront ve route odaklı uygulamalar için Remix ve Hydrogen i18n
Sunucuda render edilen dil durumunu, yerelleştirilmiş storefront içeriğini ve aramaya açık route'ları tek bir iş akışında hizalı tutmak için Better I18N'i kullanın.
Setup
Get started in 3 steps
Install the app-side SDK
Çevrilmiş içeriğin route modülleri arasında paylaşılabilmesi için Remix ya da Hydrogen uygulamanızda provider tabanlı SDK'yı kullanın.
terminal
npm install @better-i18n/use-intl use-intlDili sunucuda çözümleyin
Dili istekten, route parametrelerinden veya storefront bağlamından okuyun ve uygulamanızın köküne geçirin.
app/root.tsx
export async function loader({ request }: LoaderFunctionArgs) {
const locale = resolveLocaleFromRequest(request);
return json({ locale });
}Provider'ı kök route'ta hydrate edin
Dili bir kez sağlayın; böylece iç içe route'lar, ürün sayfaları ve sepet arayüzü aynı çeviri kaynağını paylaşır.
app/root.tsx
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<Outlet />
</BetterI18nProvider>
);
}Capabilities
Better I18N neden Remix ve Hydrogen ile kullanılır?
Remix loader'larına ve Hydrogen storefront akışlarına uyan, sunucuda yüklenen dil yönetimi
SEO açısından hassas kategori, ürün ve içerik sayfaları için uygun
Storefront arayüzü, hesap sayfaları ve pazarlama route'ları için tek bir çeviri iş akışı
Kırılgan dosya kopyalarına gerek kalmadan route tabanlı dil stratejilerini destekler
Geliştiricilerin yeniden deploy beklemeden yerelleştirilmiş storefront güncellemeleri yayınlamasına olanak tanır
Karşılaştırma ve satın alma niyeti içeriğini ürün yerelleştirme sayfalarıyla hizalı tutar
Example
Route-level locale wiring
Loader tabanlı framework'lere ve storefront route ağaçlarına uyan, provider tabanlı bir kurulum.
import { BetterI18nProvider, useTranslations } from '@better-i18n/use-intl';
export async function loader({ request }: LoaderFunctionArgs) {
return json({
locale: resolveLocaleFromRequest(request),
});
}
function ProductHero() {
const t = useTranslations('product');
return <h1>{t('title')}</h1>;
}
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<ProductHero />
<Outlet />
</BetterI18nProvider>
);
}Related guides
Other frameworks
Get started
Parçalı iş akışları olmadan yerelleştirilmiş storefront'lar yayına alın
Sunucudaki dil yönetimini, ürün içeriğini ve satın alma niyetine yönelik sayfaları tek bir yerelleştirme sisteminde tutun.