Next.jsの使用

Nextアダプターは、ルーティングに特有の動作がほとんど存在する場所です。

パスルーティング

pathRouting は、アダプターに与える init() オプションに存在します。

// src/lib/ways.ts
import { init as initWays } from '@18ways/next/server';
 
export const {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard', '/__design', '/__email'],
  },
});

それはアダプターにミドルウェアがどのパスをローカライズすべきかを指示します。

その設定が整ったら:

/pricing は /fr-FR/pricing に変わる可能性があります。
/dashboard は /dashboard のままです
/__design は /__design のままです
/__email は /__email のままです

アダプターは、/_nextや/apiのような明らかな非ページルートも自動的に除外します。

ミドルウェアフロー

waysMiddleware() は init() からのミドルウェア API です。それは:

クッキー、パス名、ブラウザの設定、または baseLocale からロケールを解決します。
ロケールプレフィックスを追加または削除する必要がある場合、受信したパス名を正規化します。
リダイレクト、リライト、またはパススルーリクエストのために正しい NextResponse を作成します
init()からのポリシーを使用してロケールの設定クッキーを書き込みます
アプリが後で読み取れるロケール対応のリクエストヘッダーを転送します

通常の場合、これで十分です:

tsx

// src/middleware.ts
import type { NextRequest } from 'next/server';
import { waysMiddleware } from '@/lib/ways';
 
export default function middleware(
  request: NextRequest
) {
  return waysMiddleware(request);
}

ミドルウェアの結果をカスタマイズする必要がある場合は、オプションを明示的に渡してください:

tsx

return waysMiddleware(request, {
  /**
   * Defaults to noop.
   * Use this to add or replace
   * request headers before the
   * response is created.
   */
  transformRequestHeaders: (context) =>
    context.requestHeaders,
 
  /**
   * Defaults to noop.
   * Use this to decorate or replace
   * the final NextResponse.
   */
  transformResponse: (response) => response,
});

transformRequestHeaders または transformResponse にアクセスするのは、デフォルトのミドルウェア結果に追加の動作が必要な場合のみです。

ロケール解決順序

現在のアダプターは、次の順序でロケールを解決します:

18ways_locale クッキー
パス名のロケールプレフィックス
ブラウザの設定
baseLocale

その順序は重要です。なぜなら、それが明示的なユーザーの好みが他のすべてを上書きすることを可能にするからです。

クライアント側のロケール変更

useLocale() を @18ways/next/client から使用してください。

tsx

'use client';
 
import {
  LanguageSwitcher,
} from '@18ways/react';
import { useLocale } from '@18ways/next/client';
 
export function LocaleControls() {
  const { locale, setLocale } = useLocale();
 
  return (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

自分のコントロールを使用したい場合は useLocale() を使用してください。既製のセレクターを同じロケール状態に接続したい場合は LanguageSwitcher を使用してください。

パスルーティングが有効になっている場合、setLocale()はURLを更新します。無効になっている場合は、ロケールの状態を更新し、ルートをリフレッシュします。

ロケール対応リンク

役立つクライアントヘルパーが2つあります:

tsx

import {
  useLocalizedHref,
  useUnlocalizedPathname,
} from '@18ways/next/client';

useLocalizedHref() は、ロケールに対応した内部 href を構築します。
useUnlocalizedPathname() は、現在のロケールプレフィックスを気にせずにルートを比較できるようにします。

それらのリンクは、ミドルウェアが強制するのと同じルールに従う必要があります。ミドルウェアがルートのロケールプレフィックスを追加または削除している場合、useLocalizedHref()はクライアントで使用するヘルパーです。

翻訳されたメタデータ

generateWaysMetadata() は、文字列メタデータフィールドをあなたのために翻訳できます。

tsx

export async function generateMetadata() {
  return generateWaysMetadata((t) => ({
    title: t('Pricing'),
    description: t(
      'Simple pricing for runtime translation'
    ),
  }));
}

パスルーティングが有効になっている場合、アダプターはロケール固有の標準および代替言語のURLも発信します。

ミドルウェアの構成

アダプターは、あなたの全ミドルウェアを所有しているとは見なされません。waysMiddleware()は、あなたの認証レイヤー内で呼び出すことができ、またはtransformRequestHeadersおよびtransformResponseでカスタマイズできます。

次のトラックに含まれるもの

ここに、次の条件に依存するドキュメントの動作を記録してください:

ミドルウェア
パス名プレフィックス
翻訳されたメタデータ
SSR ロケール解決

もしその動作が単にReactのレンダリングであるなら、それは代わりにReactトラックに属します。

Next.jsの使用

Nextアダプターは、ルーティングに特有の動作がほとんど存在する場所です。

パスルーティング

pathRouting は、アダプターに与える init() オプションに存在します。

// src/lib/ways.ts
import { init as initWays } from '@18ways/next/server';
 
export const {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard', '/__design', '/__email'],
  },
});

それはアダプターにミドルウェアがどのパスをローカライズすべきかを指示します。

その設定が整ったら:

/pricing は /fr-FR/pricing に変わる可能性があります。
/dashboard は /dashboard のままです
/__design は /__design のままです
/__email は /__email のままです

アダプターは、/_nextや/apiのような明らかな非ページルートも自動的に除外します。

ミドルウェアフロー

waysMiddleware() は init() からのミドルウェア API です。それは:

クッキー、パス名、ブラウザの設定、または baseLocale からロケールを解決します。
ロケールプレフィックスを追加または削除する必要がある場合、受信したパス名を正規化します。
リダイレクト、リライト、またはパススルーリクエストのために正しい NextResponse を作成します
init()からのポリシーを使用してロケールの設定クッキーを書き込みます
アプリが後で読み取れるロケール対応のリクエストヘッダーを転送します

通常の場合、これで十分です:

tsx

// src/middleware.ts
import type { NextRequest } from 'next/server';
import { waysMiddleware } from '@/lib/ways';
 
export default function middleware(
  request: NextRequest
) {
  return waysMiddleware(request);
}

ミドルウェアの結果をカスタマイズする必要がある場合は、オプションを明示的に渡してください:

tsx

return waysMiddleware(request, {
  /**
   * Defaults to noop.
   * Use this to add or replace
   * request headers before the
   * response is created.
   */
  transformRequestHeaders: (context) =>
    context.requestHeaders,
 
  /**
   * Defaults to noop.
   * Use this to decorate or replace
   * the final NextResponse.
   */
  transformResponse: (response) => response,
});

transformRequestHeaders または transformResponse にアクセスするのは、デフォルトのミドルウェア結果に追加の動作が必要な場合のみです。

ロケール解決順序

現在のアダプターは、次の順序でロケールを解決します:

18ways_locale クッキー
パス名のロケールプレフィックス
ブラウザの設定
baseLocale

その順序は重要です。なぜなら、それが明示的なユーザーの好みが他のすべてを上書きすることを可能にするからです。

クライアント側のロケール変更

useLocale() を @18ways/next/client から使用してください。

tsx

'use client';
 
import {
  LanguageSwitcher,
} from '@18ways/react';
import { useLocale } from '@18ways/next/client';
 
export function LocaleControls() {
  const { locale, setLocale } = useLocale();
 
  return (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

ロケール対応リンク

役立つクライアントヘルパーが2つあります:

tsx

import {
  useLocalizedHref,
  useUnlocalizedPathname,
} from '@18ways/next/client';

useLocalizedHref() は、ロケールに対応した内部 href を構築します。
useUnlocalizedPathname() は、現在のロケールプレフィックスを気にせずにルートを比較できるようにします。

翻訳されたメタデータ

generateWaysMetadata() は、文字列メタデータフィールドをあなたのために翻訳できます。

tsx

export async function generateMetadata() {
  return generateWaysMetadata((t) => ({
    title: t('Pricing'),
    description: t(
      'Simple pricing for runtime translation'
    ),
  }));
}

パスルーティングが有効になっている場合、アダプターはロケール固有の標準および代替言語のURLも発信します。

ミドルウェアの構成

次のトラックに含まれるもの

ここに、次の条件に依存するドキュメントの動作を記録してください:

ミドルウェア
パス名プレフィックス
翻訳されたメタデータ
SSR ロケール解決

もしその動作が単にReactのレンダリングであるなら、それは代わりにReactトラックに属します。

Next.jsの使用

Nextアダプターは、ルーティングに特有の動作がほとんど存在する場所です。

パスルーティング

pathRouting は、アダプターに与える init() オプションに存在します。

// src/lib/ways.ts
import { init as initWays } from '@18ways/next/server';
 
export const {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard', '/__design', '/__email'],
  },
});

それはアダプターにミドルウェアがどのパスをローカライズすべきかを指示します。

その設定が整ったら:

/pricing は /fr-FR/pricing に変わる可能性があります。
/dashboard は /dashboard のままです
/__design は /__design のままです
/__email は /__email のままです

アダプターは、/_nextや/apiのような明らかな非ページルートも自動的に除外します。

ミドルウェアフロー

waysMiddleware() は init() からのミドルウェア API です。それは:

クッキー、パス名、ブラウザの設定、または baseLocale からロケールを解決します。
ロケールプレフィックスを追加または削除する必要がある場合、受信したパス名を正規化します。
リダイレクト、リライト、またはパススルーリクエストのために正しい NextResponse を作成します
init()からのポリシーを使用してロケールの設定クッキーを書き込みます
アプリが後で読み取れるロケール対応のリクエストヘッダーを転送します

通常の場合、これで十分です:

tsx

// src/middleware.ts
import type { NextRequest } from 'next/server';
import { waysMiddleware } from '@/lib/ways';
 
export default function middleware(
  request: NextRequest
) {
  return waysMiddleware(request);
}

ミドルウェアの結果をカスタマイズする必要がある場合は、オプションを明示的に渡してください:

tsx

return waysMiddleware(request, {
  /**
   * Defaults to noop.
   * Use this to add or replace
   * request headers before the
   * response is created.
   */
  transformRequestHeaders: (context) =>
    context.requestHeaders,
 
  /**
   * Defaults to noop.
   * Use this to decorate or replace
   * the final NextResponse.
   */
  transformResponse: (response) => response,
});

transformRequestHeaders または transformResponse にアクセスするのは、デフォルトのミドルウェア結果に追加の動作が必要な場合のみです。

ロケール解決順序

現在のアダプターは、次の順序でロケールを解決します:

18ways_locale クッキー
パス名のロケールプレフィックス
ブラウザの設定
baseLocale

その順序は重要です。なぜなら、それが明示的なユーザーの好みが他のすべてを上書きすることを可能にするからです。

クライアント側のロケール変更

useLocale() を @18ways/next/client から使用してください。

tsx

'use client';
 
import {
  LanguageSwitcher,
} from '@18ways/react';
import { useLocale } from '@18ways/next/client';
 
export function LocaleControls() {
  const { locale, setLocale } = useLocale();
 
  return (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

ロケール対応リンク

役立つクライアントヘルパーが2つあります:

tsx

import {
  useLocalizedHref,
  useUnlocalizedPathname,
} from '@18ways/next/client';

useLocalizedHref() は、ロケールに対応した内部 href を構築します。
useUnlocalizedPathname() は、現在のロケールプレフィックスを気にせずにルートを比較できるようにします。

翻訳されたメタデータ

generateWaysMetadata() は、文字列メタデータフィールドをあなたのために翻訳できます。

tsx

export async function generateMetadata() {
  return generateWaysMetadata((t) => ({
    title: t('Pricing'),
    description: t(
      'Simple pricing for runtime translation'
    ),
  }));
}

パスルーティングが有効になっている場合、アダプターはロケール固有の標準および代替言語のURLも発信します。

ミドルウェアの構成

次のトラックに含まれるもの

ここに、次の条件に依存するドキュメントの動作を記録してください:

ミドルウェア
パス名プレフィックス
翻訳されたメタデータ
SSR ロケール解決

もしその動作が単にReactのレンダリングであるなら、それは代わりにReactトラックに属します。

Next.jsの使用

Nextアダプターは、ルーティングに特有の動作がほとんど存在する場所です。

パスルーティング

pathRouting は、アダプターに与える init() オプションに存在します。

// src/lib/ways.ts
import { init as initWays } from '@18ways/next/server';
 
export const {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard', '/__design', '/__email'],
  },
});

それはアダプターにミドルウェアがどのパスをローカライズすべきかを指示します。

その設定が整ったら:

/pricing は /fr-FR/pricing に変わる可能性があります。
/dashboard は /dashboard のままです
/__design は /__design のままです
/__email は /__email のままです

アダプターは、/_nextや/apiのような明らかな非ページルートも自動的に除外します。

ミドルウェアフロー

waysMiddleware() は init() からのミドルウェア API です。それは:

クッキー、パス名、ブラウザの設定、または baseLocale からロケールを解決します。
ロケールプレフィックスを追加または削除する必要がある場合、受信したパス名を正規化します。
リダイレクト、リライト、またはパススルーリクエストのために正しい NextResponse を作成します
init()からのポリシーを使用してロケールの設定クッキーを書き込みます
アプリが後で読み取れるロケール対応のリクエストヘッダーを転送します

通常の場合、これで十分です:

tsx

// src/middleware.ts
import type { NextRequest } from 'next/server';
import { waysMiddleware } from '@/lib/ways';
 
export default function middleware(
  request: NextRequest
) {
  return waysMiddleware(request);
}

ミドルウェアの結果をカスタマイズする必要がある場合は、オプションを明示的に渡してください:

tsx

return waysMiddleware(request, {
  /**
   * Defaults to noop.
   * Use this to add or replace
   * request headers before the
   * response is created.
   */
  transformRequestHeaders: (context) =>
    context.requestHeaders,
 
  /**
   * Defaults to noop.
   * Use this to decorate or replace
   * the final NextResponse.
   */
  transformResponse: (response) => response,
});

transformRequestHeaders または transformResponse にアクセスするのは、デフォルトのミドルウェア結果に追加の動作が必要な場合のみです。

ロケール解決順序

現在のアダプターは、次の順序でロケールを解決します:

18ways_locale クッキー
パス名のロケールプレフィックス
ブラウザの設定
baseLocale

その順序は重要です。なぜなら、それが明示的なユーザーの好みが他のすべてを上書きすることを可能にするからです。

クライアント側のロケール変更

useLocale() を @18ways/next/client から使用してください。

tsx

'use client';
 
import {
  LanguageSwitcher,
} from '@18ways/react';
import { useLocale } from '@18ways/next/client';
 
export function LocaleControls() {
  const { locale, setLocale } = useLocale();
 
  return (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

ロケール対応リンク

役立つクライアントヘルパーが2つあります:

tsx

import {
  useLocalizedHref,
  useUnlocalizedPathname,
} from '@18ways/next/client';

useLocalizedHref() は、ロケールに対応した内部 href を構築します。
useUnlocalizedPathname() は、現在のロケールプレフィックスを気にせずにルートを比較できるようにします。

翻訳されたメタデータ

generateWaysMetadata() は、文字列メタデータフィールドをあなたのために翻訳できます。

tsx

export async function generateMetadata() {
  return generateWaysMetadata((t) => ({
    title: t('Pricing'),
    description: t(
      'Simple pricing for runtime translation'
    ),
  }));
}

パスルーティングが有効になっている場合、アダプターはロケール固有の標準および代替言語のURLも発信します。

ミドルウェアの構成

次のトラックに含まれるもの

ここに、次の条件に依存するドキュメントの動作を記録してください:

ミドルウェア
パス名プレフィックス
翻訳されたメタデータ
SSR ロケール解決

もしその動作が単にReactのレンダリングであるなら、それは代わりにReactトラックに属します。

Next.jsの使用

Nextアダプターは、ルーティングに特有の動作がほとんど存在する場所です。

パスルーティング

pathRouting は、アダプターに与える init() オプションに存在します。

// src/lib/ways.ts
import { init as initWays } from '@18ways/next/server';
 
export const {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard', '/__design', '/__email'],
  },
});

それはアダプターにミドルウェアがどのパスをローカライズすべきかを指示します。

その設定が整ったら:

/pricing は /fr-FR/pricing に変わる可能性があります。
/dashboard は /dashboard のままです
/__design は /__design のままです
/__email は /__email のままです

アダプターは、/_nextや/apiのような明らかな非ページルートも自動的に除外します。

ミドルウェアフロー

waysMiddleware() は init() からのミドルウェア API です。それは:

クッキー、パス名、ブラウザの設定、または baseLocale からロケールを解決します。
ロケールプレフィックスを追加または削除する必要がある場合、受信したパス名を正規化します。
リダイレクト、リライト、またはパススルーリクエストのために正しい NextResponse を作成します
init()からのポリシーを使用してロケールの設定クッキーを書き込みます
アプリが後で読み取れるロケール対応のリクエストヘッダーを転送します

通常の場合、これで十分です:

tsx

// src/middleware.ts
import type { NextRequest } from 'next/server';
import { waysMiddleware } from '@/lib/ways';
 
export default function middleware(
  request: NextRequest
) {
  return waysMiddleware(request);
}

ミドルウェアの結果をカスタマイズする必要がある場合は、オプションを明示的に渡してください:

tsx

return waysMiddleware(request, {
  /**
   * Defaults to noop.
   * Use this to add or replace
   * request headers before the
   * response is created.
   */
  transformRequestHeaders: (context) =>
    context.requestHeaders,
 
  /**
   * Defaults to noop.
   * Use this to decorate or replace
   * the final NextResponse.
   */
  transformResponse: (response) => response,
});

transformRequestHeaders または transformResponse にアクセスするのは、デフォルトのミドルウェア結果に追加の動作が必要な場合のみです。

ロケール解決順序

現在のアダプターは、次の順序でロケールを解決します:

18ways_locale クッキー
パス名のロケールプレフィックス
ブラウザの設定
baseLocale

その順序は重要です。なぜなら、それが明示的なユーザーの好みが他のすべてを上書きすることを可能にするからです。

クライアント側のロケール変更

useLocale() を @18ways/next/client から使用してください。

tsx

'use client';
 
import {
  LanguageSwitcher,
} from '@18ways/react';
import { useLocale } from '@18ways/next/client';
 
export function LocaleControls() {
  const { locale, setLocale } = useLocale();
 
  return (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

ロケール対応リンク

役立つクライアントヘルパーが2つあります:

tsx

import {
  useLocalizedHref,
  useUnlocalizedPathname,
} from '@18ways/next/client';

useLocalizedHref() は、ロケールに対応した内部 href を構築します。
useUnlocalizedPathname() は、現在のロケールプレフィックスを気にせずにルートを比較できるようにします。

翻訳されたメタデータ

generateWaysMetadata() は、文字列メタデータフィールドをあなたのために翻訳できます。

tsx

export async function generateMetadata() {
  return generateWaysMetadata((t) => ({
    title: t('Pricing'),
    description: t(
      'Simple pricing for runtime translation'
    ),
  }));
}

パスルーティングが有効になっている場合、アダプターはロケール固有の標準および代替言語のURLも発信します。

ミドルウェアの構成

次のトラックに含まれるもの

ここに、次の条件に依存するドキュメントの動作を記録してください:

ミドルウェア
パス名プレフィックス
翻訳されたメタデータ
SSR ロケール解決

もしその動作が単にReactのレンダリングであるなら、それは代わりにReactトラックに属します。

Next.jsの使用

Nextアダプターは、ルーティングに特有の動作がほとんど存在する場所です。

パスルーティング

pathRouting は、アダプターに与える init() オプションに存在します。

// src/lib/ways.ts
import { init as initWays } from '@18ways/next/server';
 
export const {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard', '/__design', '/__email'],
  },
});

それはアダプターにミドルウェアがどのパスをローカライズすべきかを指示します。

その設定が整ったら:

/pricing は /fr-FR/pricing に変わる可能性があります。
/dashboard は /dashboard のままです
/__design は /__design のままです
/__email は /__email のままです

アダプターは、/_nextや/apiのような明らかな非ページルートも自動的に除外します。

ミドルウェアフロー

waysMiddleware() は init() からのミドルウェア API です。それは:

クッキー、パス名、ブラウザの設定、または baseLocale からロケールを解決します。
ロケールプレフィックスを追加または削除する必要がある場合、受信したパス名を正規化します。
リダイレクト、リライト、またはパススルーリクエストのために正しい NextResponse を作成します
init()からのポリシーを使用してロケールの設定クッキーを書き込みます
アプリが後で読み取れるロケール対応のリクエストヘッダーを転送します

通常の場合、これで十分です:

tsx

// src/middleware.ts
import type { NextRequest } from 'next/server';
import { waysMiddleware } from '@/lib/ways';
 
export default function middleware(
  request: NextRequest
) {
  return waysMiddleware(request);
}

ミドルウェアの結果をカスタマイズする必要がある場合は、オプションを明示的に渡してください:

tsx

return waysMiddleware(request, {
  /**
   * Defaults to noop.
   * Use this to add or replace
   * request headers before the
   * response is created.
   */
  transformRequestHeaders: (context) =>
    context.requestHeaders,
 
  /**
   * Defaults to noop.
   * Use this to decorate or replace
   * the final NextResponse.
   */
  transformResponse: (response) => response,
});

transformRequestHeaders または transformResponse にアクセスするのは、デフォルトのミドルウェア結果に追加の動作が必要な場合のみです。

ロケール解決順序

現在のアダプターは、次の順序でロケールを解決します:

18ways_locale クッキー
パス名のロケールプレフィックス
ブラウザの設定
baseLocale

その順序は重要です。なぜなら、それが明示的なユーザーの好みが他のすべてを上書きすることを可能にするからです。

クライアント側のロケール変更

useLocale() を @18ways/next/client から使用してください。

tsx

'use client';
 
import {
  LanguageSwitcher,
} from '@18ways/react';
import { useLocale } from '@18ways/next/client';
 
export function LocaleControls() {
  const { locale, setLocale } = useLocale();
 
  return (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

ロケール対応リンク

役立つクライアントヘルパーが2つあります:

tsx

import {
  useLocalizedHref,
  useUnlocalizedPathname,
} from '@18ways/next/client';

useLocalizedHref() は、ロケールに対応した内部 href を構築します。
useUnlocalizedPathname() は、現在のロケールプレフィックスを気にせずにルートを比較できるようにします。

翻訳されたメタデータ

generateWaysMetadata() は、文字列メタデータフィールドをあなたのために翻訳できます。

tsx

export async function generateMetadata() {
  return generateWaysMetadata((t) => ({
    title: t('Pricing'),
    description: t(
      'Simple pricing for runtime translation'
    ),
  }));
}

パスルーティングが有効になっている場合、アダプターはロケール固有の標準および代替言語のURLも発信します。

ミドルウェアの構成

次のトラックに含まれるもの

ここに、次の条件に依存するドキュメントの動作を記録してください:

ミドルウェア
パス名プレフィックス
翻訳されたメタデータ
SSR ロケール解決

もしその動作が単にReactのレンダリングであるなら、それは代わりにReactトラックに属します。

Next.jsの使用

Nextアダプターは、ルーティングに特有の動作がほとんど存在する場所です。

パスルーティング

pathRouting は、アダプターに与える init() オプションに存在します。

// src/lib/ways.ts
import { init as initWays } from '@18ways/next/server';
 
export const {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard', '/__design', '/__email'],
  },
});

それはアダプターにミドルウェアがどのパスをローカライズすべきかを指示します。

その設定が整ったら:

/pricing は /fr-FR/pricing に変わる可能性があります。
/dashboard は /dashboard のままです
/__design は /__design のままです
/__email は /__email のままです

アダプターは、/_nextや/apiのような明らかな非ページルートも自動的に除外します。

ミドルウェアフロー

waysMiddleware() は init() からのミドルウェア API です。それは:

クッキー、パス名、ブラウザの設定、または baseLocale からロケールを解決します。
ロケールプレフィックスを追加または削除する必要がある場合、受信したパス名を正規化します。
リダイレクト、リライト、またはパススルーリクエストのために正しい NextResponse を作成します
init()からのポリシーを使用してロケールの設定クッキーを書き込みます
アプリが後で読み取れるロケール対応のリクエストヘッダーを転送します

通常の場合、これで十分です:

tsx

// src/middleware.ts
import type { NextRequest } from 'next/server';
import { waysMiddleware } from '@/lib/ways';
 
export default function middleware(
  request: NextRequest
) {
  return waysMiddleware(request);
}

ミドルウェアの結果をカスタマイズする必要がある場合は、オプションを明示的に渡してください:

tsx

return waysMiddleware(request, {
  /**
   * Defaults to noop.
   * Use this to add or replace
   * request headers before the
   * response is created.
   */
  transformRequestHeaders: (context) =>
    context.requestHeaders,
 
  /**
   * Defaults to noop.
   * Use this to decorate or replace
   * the final NextResponse.
   */
  transformResponse: (response) => response,
});

transformRequestHeaders または transformResponse にアクセスするのは、デフォルトのミドルウェア結果に追加の動作が必要な場合のみです。

ロケール解決順序

現在のアダプターは、次の順序でロケールを解決します:

18ways_locale クッキー
パス名のロケールプレフィックス
ブラウザの設定
baseLocale

その順序は重要です。なぜなら、それが明示的なユーザーの好みが他のすべてを上書きすることを可能にするからです。

クライアント側のロケール変更

useLocale() を @18ways/next/client から使用してください。

tsx

'use client';
 
import {
  LanguageSwitcher,
} from '@18ways/react';
import { useLocale } from '@18ways/next/client';
 
export function LocaleControls() {
  const { locale, setLocale } = useLocale();
 
  return (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

ロケール対応リンク

役立つクライアントヘルパーが2つあります:

tsx

import {
  useLocalizedHref,
  useUnlocalizedPathname,
} from '@18ways/next/client';

useLocalizedHref() は、ロケールに対応した内部 href を構築します。
useUnlocalizedPathname() は、現在のロケールプレフィックスを気にせずにルートを比較できるようにします。

翻訳されたメタデータ

generateWaysMetadata() は、文字列メタデータフィールドをあなたのために翻訳できます。

tsx

export async function generateMetadata() {
  return generateWaysMetadata((t) => ({
    title: t('Pricing'),
    description: t(
      'Simple pricing for runtime translation'
    ),
  }));
}

パスルーティングが有効になっている場合、アダプターはロケール固有の標準および代替言語のURLも発信します。

ミドルウェアの構成

次のトラックに含まれるもの

ここに、次の条件に依存するドキュメントの動作を記録してください:

ミドルウェア
パス名プレフィックス
翻訳されたメタデータ
SSR ロケール解決

もしその動作が単にReactのレンダリングであるなら、それは代わりにReactトラックに属します。