コアコンセプト

18waysは、いくつかのことについて意見を持っています。これらが明確になると、APIの残りの部分は 簡単になります。

基本ロケール

あなたの baseLocale は、あなたが書く言語です。

あなたの製品コピーがイギリス英語で書かれている場合、基本ロケールは en-GB です。アメリカ英語で書かれている場合、基本ロケールは en-US です。

現在のロケールがベースロケールと一致する場合、18waysはソーステキストを即座に返し、翻訳作業をスキップします。

ターゲットロケール

ユーザーが現在読んでいる言語が、あなたのターゲットロケールです。

Next.jsでは、アダプターはミドルウェア、クッキー、パス名、ブラウザの設定からそれを解決できます。

コンテキスト

コンテキストは、18waysが関連するコピーをグループ化する方法です。

翻訳リクエストを小さく保ち、無関係なテキストを混ぜないようにするために、それらを使用してください。

tsx
'use client';
 
import { Ways } from '@18ways/react';
 
export function MarketingPage() {
  return (
    <Ways context="marketing">
      <Ways context="hero">
        <Hero />
      </Ways>
      <Ways context="pricing">
        <Pricing />
      </Ways>
    </Ways>
  );
}

ネストされた Ways スコープは、1 つのコンテキストパスに構成されます。 marketing と hero を組み合わせると、 marketing.hero になります。

受け入れられたロケール

18waysは次のように区別します:

  • fr-FR のように認識できるロケール
  • プロジェクトが実際に受け入れるロケール

ランタイムはAPIから受け入れられたロケールのリストを取得し、そのリストに対して受信したロケール値を正規化できます。

それが理由で、@18ways/nextは、/en-US/docsを/en-GB/docsにリダイレクトするような合理的なことができます。 その際、en-GBのみが有効になっている場合です。

ts
import { init as initWays } from '@18ways/next/server';
 
const ways = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  acceptedLocales: [
    'en-GB',
    'fr-FR',
    'de-DE',
  ],
  pathRouting: {
    exclude: ['/dashboard', '/__design', '/__email'],
  },
});

持続性

ランタイムで使用されるロケール設定クッキーは 18ways_locale です。

翻訳が読み込まれるとき

@18ways/next はサーバー上でロケールを解決し、コンテキスト翻訳をシードし、翻訳されたメタデータを出力できます。

共有されたメンタルモデル

モデルをシンプルに保つ:

  1. アプリに適したパッケージを選択してください。
  2. ベースロケールを正しく設定してください。
  3. コンテキストキーを安定させ、意味のあるものに保ちます。
  4. ランタイムにフレーズ全体を翻訳させ、断片ではなくする。

次: メッセージフォーマット