Next.jsの使用

Next アダプターは次のように分かれています:

  • ローカルの18ways.config.tsファイル
  • next.config.js におけるビルド時の Next 統合
  • @18ways/next/server のサーバー ヘルパー
  • @18ways/next/client のクライアントヘルパー

共有設定

アプリのルートに 18ways.config.ts を作成してください。

ts
// 18ways.config.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;

次に、next.config.js では：

ts
// next.config.js
const { withWays } = require('@18ways/next/config');
 
module.exports = withWays({
  // your normal next config here
});

App Router のパスルーティング

App Router では、ロケールルーティングはルートツリー自体によって定義されます。

  • 公開ローカライズルートは app/[lang]/... の下にあります
  • ローカライズされていないルートは [lang] の外に残る

パスルーターのパスルーティング

パスベースのロケールルーティングを使いたい場合は、router: 'path' を設定し、acceptedLocales を指定してください。 withWays() はその後、Next のネイティブな i18n パスルーティングを設定し、Next の自動ロケール 検出を無効にして、18ways がロケール解決を引き続き担当するようにします。

ts
// 18ways.config.ts
import type { WaysConfig } from '@18ways/next/config';
 
export default {
  apiKey: process.env.NEXT_PUBLIC_18WAYS_PUBLIC_API_KEY,
  baseLocale: 'en-GB',
  router: 'path', // '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
  acceptedLocales: ['en-GB', 'fr-FR'], // keep this in sync with the languages enabled in your 18ways dashboard
} satisfies WaysConfig;

既存のルーティング層がすでにロケール対応の URL を管理していて、18ways にはロケール状態のみを管理させたい場合は、router: 'none' を使用してください。

ルートレイアウト

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

tsx
import { WaysRoot, htmlAttrs } from '@18ways/next/server';
 
export default async function RootLayout({ children, params }) {
  const attrs = await htmlAttrs({ params });
 
  return (
    <html {...attrs}>
      <body>
        <WaysRoot params={params}>{children}</WaysRoot>
      </body>
    </html>
  );
}

プロキシ

App Router では、ルートロケールのリダイレクトと各ドメインの正規化を処理するために proxy.ts を使用します:

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

アプリにすでに独自の proxy.ts または middleware.ts がある場合は、getWaysProxyResponse() を組み合わせて それをアプリ固有のロジックの前に返してください：

ts
import type { NextFetchEvent, NextRequest } from 'next/server';
import { getWaysProxyResponse } from '@18ways/next/proxy';
 
export default async function middleware(request: NextRequest, event: NextFetchEvent) {
  const waysResponse = await getWaysProxyResponse(request);
  if (waysResponse) {
    return waysResponse;
  }
 
  // your existing middleware logic
}

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

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} />;
}

現在のルートがローカライズされている場合、setLocale() はルートを維持したまま locale セグメントを更新します。現在のルートがローカライズされていない場合は、ルートをローカライズされていないままにして locale 状態を更新します。

@18ways/next/client からインポート:

tsx
import { Link, useRouter, useUnlocalizedPathname } from '@18ways/next/client';
  • Link は内部の href を自動的にローカライズします
  • useRouter() は push() と replace() に同じルールを適用します
  • useUnlocalizedPathname() を使うと、ロケールのプレフィックスなしでルートの状態を比較できます

選択を強制する必要がある場合にのみ、locale のオーバーライドを使用してください：

  • locale="fr-FR" はローカライズされたターゲットを強制します
  • locale={false} はローカライズされていない対象を強制します

翻訳されたメタデータ

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

tsx
export async function generateMetadata({ params }) {
  return generateWaysMetadata(
    (t) => ({
      title: t('Pricing'),
      description: t('Simple pricing for runtime translation'),
    }),
    { params, pathname: '/pricing' }
  );
}
言語を変更中
Next.js の使用方法