Next.js リファレンス

18ways.config.*

アプリのルートに 18ways.config.ts、18ways.config.js、または 18ways.config.cjs を作成し、そこから 18ways の設定をエクスポートしてください。

ts
import type { WaysConfig } from '@18ways/next/config';
 
export default {
  apiKey: process.env.NEXT_PUBLIC_18WAYS_PUBLIC_API_KEY,
  baseLocale: 'en-GB',
  router: 'app', // 'app', 'path', or 'none' depending on if you use app router, path router, or if you don't want the router to sync with locale at all
} satisfies WaysConfig;

withWays()

@18ways/next/config からインポートし、next.config.js から呼び出します。

ts
import { withWays } from '@18ways/next/config';

18ways.config.* が存在する場合、withWays() はそれを自動的に読み込みます。router: 'path' では、ロケール検出を無効にしたネイティブの Next i18n 設定を返します。router: 'app' および router: 'none' では、@18ways/next/server からの直接インポートに必要なエイリアスを挿入します。

一般的なオプション:

オプションタイプノート
apiKey文字列必須です。
baseLocale文字列ルーティングのためのソースロケールとデフォルトロケール。
ルーター'app' | 'path' | 'none'ロケールルーティングモード。ほかのルーターがすでにロケール URL を管理している場合は、none を使用してください。
acceptedLocales文字列[]明示的なロケール一覧。path では必須、その他では任意です。path モードは、18ways ダッシュボードで有効にしている言語と同期させてください。
ドメインArray<{domain, defaultLocale}>オプションのドメインルーティングマップ。
localeParamName文字列App Router のロケールセグメントのパラメータ。既定値は lang です。
persistLocaleCookieboolean | ((request) => boolean)サーバーおよびクライアントのロケール変更に対するロケールCookieの永続化ポリシー。
cacheTtl番号アダプタリクエストのキャッシュTTL。
フェッチャーfetchの型カスタムフェッチ実装。

init(config)

@18ways/next/server からインポートします。

設定オブジェクトを明示的にバインドしたいときに使用します。

WaysRoot

WaysRoot は @18ways/next/server から直接インポートし、next.config.js を withWays(...) でラップした後に、レイアウト内で使用してください。

レイアウトで WaysRoot を使用して、アダプターが現在のリクエストの実行時状態を初期化できるようにします。 App Router のロケールルーティングでは、通常 app/[lang]/layout.tsx を意味します。

getLocale()

サーバー上で現在のロケールを解決します。これは、ロケール状態が WaysRoot の外側で必要なときに使うヘルパーです。たとえば、サーバー専用の SEO ヘルパーや、その他のリクエストに紐づくサーバーコードで使います。

htmlAttrs()

htmlAttrs() は、ドキュメント要素の現在の lang と dir の値を解決します。

generateWaysMetadata()

generateWaysMetadata() を generateMetadata() 内で使用すると、翻訳されたタイトル、説明、およびロケールに応じた正規または代替のURLが得られます。

proxy.ts

router: 'app' では、proxy.ts がリクエスト時のロケールリダイレクトのための推奨エントリポイントです。 @18ways/next/proxy から再エクスポートして、/ -> /{locale} とドメインの正規化を処理します。

ts
export { default, config } from '@18ways/next/proxy';

すでに独自のプロジェクト proxy.ts または middleware.ts がある場合は、 getWaysProxyResponse(request) を使用し、残りのロジックより前にそれを返してください。

クライアントヘルパー

@18ways/next/client からインポートします。

useLocale()

現在のロケールを読み取り、変更します。これは、LanguageSwitcher または独自のカスタムセレクター UI と組み合わせるフックです。

useRouter()

Next ナビゲーションをロケール対応に包むラッパーです。ローカライズされた遷移先を強制するには locale="fr-FR" を指定し、 ローカライズなしの遷移先を強制するには locale={false} を指定してください。

next/link をロケール対応でラップし、useRouter() と同じ上書きモデルを備えています。

useUnlocalizedPathname()

ロケールプレフィックスなしで現在のパス名を読み取ります。

useLocalizedHref()

内部の href を現在のロケール対応 href に変換するための低レベルなヘルパー。

Path routing config

router: 'app' モードでは、アダプターはあなたのルートツリーに従います:

  • app/[lang]/... 以下のルートはローカライズされています
  • その区間の外側のルートはローカライズされない

Link、useRouter()、setLocale() は、内部ルートをデフォルトでローカライズ済みとして扱います。locale={false} は、ローカライズされていないルートを明示的に指定する必要がある場合にのみ使用してください。

Next.js リファレンス