Remix & Hydrogen i18n
스토어프론트와 라우트 중심 앱을 위한 Remix 및 Hydrogen i18n
Better I18N을 사용해 서버에서 렌더링된 로케일 상태, 현지화된 스토어프론트 콘텐츠, 검색에 노출되는 라우트를 하나의 워크플로에서 일관되게 유지하세요.
Setup
Get started in 3 steps
Install the app-side SDK
번역된 콘텐츠를 여러 라우트 모듈에서 공유할 수 있도록 Remix 또는 Hydrogen 앱에서 provider 기반 SDK를 사용하세요.
terminal
npm install @better-i18n/use-intl use-intl서버에서 로케일 확인하기
요청, 라우트 파라미터 또는 스토어프론트 컨텍스트에서 로케일을 읽어 앱 루트에 전달하세요.
app/root.tsx
export async function loader({ request }: LoaderFunctionArgs) {
const locale = resolveLocaleFromRequest(request);
return json({ locale });
}루트 라우트에서 provider 하이드레이션하기
로케일을 한 번만 제공하면 중첩 라우트, 제품 페이지, 장바구니 UI가 모두 같은 번역 소스를 공유합니다.
app/root.tsx
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<Outlet />
</BetterI18nProvider>
);
}Capabilities
Remix와 Hydrogen에서 Better I18N을 사용하는 이유
Remix loader와 Hydrogen 스토어프론트 흐름에 맞는, 서버에서 로드되는 로케일 처리
SEO에 민감한 카테고리, 제품, 콘텐츠 페이지에 적합합니다
스토어프론트 UI, 계정 페이지, 마케팅 라우트를 위한 하나의 번역 워크플로
취약한 파일 복제 없이 라우트 기반 로케일 전략을 지원합니다
개발자가 재배포를 기다리지 않고 현지화된 스토어프론트 업데이트를 배포할 수 있습니다
비교 콘텐츠와 구매 의도 콘텐츠를 제품 현지화 페이지와 일치하도록 유지합니다
Example
Route-level locale wiring
loader 기반 프레임워크와 스토어프론트 라우트 트리에 잘 맞는 provider 기반 설정입니다.
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
분산된 워크플로 없이 현지화된 스토어프론트를 배포하세요
서버의 로케일 처리, 제품 콘텐츠, 구매 의도 페이지를 하나의 현지화 시스템에서 관리하세요.