§13-02Personalization
言語切替 (i18n)
表示言語をドロップダウンから切り替える。
ブラウザの自動判定が合わない利用者が、自分で言語を選べる。多言語で提供するサービスのヘッダーやフッターに置く。
実装のポイント
言語名はその言語自身の表記で並べ、国旗は使わない。切替時は html の lang 属性も更新し、選択は URL かクッキーに保存して再訪時に復元する。
- 特徴
- 状態管理
- デモで使っているもの
- lucide-react
§13-02Personalization
表示言語をドロップダウンから切り替える。
ブラウザの自動判定が合わない利用者が、自分で言語を選べる。多言語で提供するサービスのヘッダーやフッターに置く。
言語名はその言語自身の表記で並べ、国旗は使わない。切替時は html の lang 属性も更新し、選択は URL かクッキーに保存して再訪時に復元する。