Next.js 使用

下一個適配器是大多數路由特定行為所在的地方。

路徑路由

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。它:

從 cookie、路徑名、瀏覽器偏好或 baseLocale 解決區域設置
如果需要添加或移除區域前綴，則對傳入的路徑名進行標準化
為重定向、重寫或通過請求創建正確的 NextResponse
使用 init() 中的政策寫入地區偏好 cookie
轉發您的應用程式稍後可以讀取的區域感知請求標頭

對於正常情況，這已經足夠了：

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 cookie
路徑中的區域前綴
瀏覽器偏好設定
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。當它被禁用時，它會更新語言狀態並刷新路由。

區域感知連結

有兩個有用的客戶端助手：

tsx

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

useLocalizedHref() 建立區域感知的內部 hrefs。
useUnlocalizedPathname() 讓你在比較路由時不必擔心當前的語言前綴。

這些連結應遵循您的中介軟體所強制執行的相同規則。如果中介軟體正在為路由添加或移除地區前綴，useLocalizedHref() 應該是您在客戶端使用的輔助工具。

翻譯的元數據

generateWaysMetadata() 可以為您翻譯字符串元數據字段。

tsx

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

當路徑路由啟用時，適配器還會發出特定於區域的標準和替代語言網址。

中介軟體組合

適配器並不假設它擁有您的整個中介軟體。waysMiddleware() 可以在您的身份驗證層中調用，或使用 transformRequestHeaders 和 transformResponse 進行自定義。

下一首曲目中應該包含什麼

在此記錄行為，當其依賴於：

中介軟體
路徑前綴
翻譯的元數據
SSR 語言環境解析

如果這個行為只是 React 渲染，那麼它應該放在 React 路徑中。

Next.js 使用

下一個適配器是大多數路由特定行為所在的地方。

路徑路由

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。它:

從 cookie、路徑名、瀏覽器偏好或 baseLocale 解決區域設置
如果需要添加或移除區域前綴，則對傳入的路徑名進行標準化
為重定向、重寫或通過請求創建正確的 NextResponse
使用 init() 中的政策寫入地區偏好 cookie
轉發您的應用程式稍後可以讀取的區域感知請求標頭

對於正常情況，這已經足夠了：

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 cookie
路徑中的區域前綴
瀏覽器偏好設定
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。當它被禁用時，它會更新語言狀態並刷新路由。

區域感知連結

有兩個有用的客戶端助手：

tsx

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

useLocalizedHref() 建立區域感知的內部 hrefs。
useUnlocalizedPathname() 讓你在比較路由時不必擔心當前的語言前綴。

翻譯的元數據

generateWaysMetadata() 可以為您翻譯字符串元數據字段。

tsx

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

當路徑路由啟用時，適配器還會發出特定於區域的標準和替代語言網址。

中介軟體組合

適配器並不假設它擁有您的整個中介軟體。waysMiddleware() 可以在您的身份驗證層中調用，或使用 transformRequestHeaders 和 transformResponse 進行自定義。

下一首曲目中應該包含什麼

在此記錄行為，當其依賴於：

中介軟體
路徑前綴
翻譯的元數據
SSR 語言環境解析

如果這個行為只是 React 渲染，那麼它應該放在 React 路徑中。

Next.js 使用

下一個適配器是大多數路由特定行為所在的地方。

路徑路由

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。它:

從 cookie、路徑名、瀏覽器偏好或 baseLocale 解決區域設置
如果需要添加或移除區域前綴，則對傳入的路徑名進行標準化
為重定向、重寫或通過請求創建正確的 NextResponse
使用 init() 中的政策寫入地區偏好 cookie
轉發您的應用程式稍後可以讀取的區域感知請求標頭

對於正常情況，這已經足夠了：

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 cookie
路徑中的區域前綴
瀏覽器偏好設定
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。當它被禁用時，它會更新語言狀態並刷新路由。

區域感知連結

有兩個有用的客戶端助手：

tsx

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

useLocalizedHref() 建立區域感知的內部 hrefs。
useUnlocalizedPathname() 讓你在比較路由時不必擔心當前的語言前綴。

翻譯的元數據

generateWaysMetadata() 可以為您翻譯字符串元數據字段。

tsx

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

當路徑路由啟用時，適配器還會發出特定於區域的標準和替代語言網址。

中介軟體組合

適配器並不假設它擁有您的整個中介軟體。waysMiddleware() 可以在您的身份驗證層中調用，或使用 transformRequestHeaders 和 transformResponse 進行自定義。

下一首曲目中應該包含什麼

在此記錄行為，當其依賴於：

中介軟體
路徑前綴
翻譯的元數據
SSR 語言環境解析

如果這個行為只是 React 渲染，那麼它應該放在 React 路徑中。

Next.js 使用

下一個適配器是大多數路由特定行為所在的地方。

路徑路由

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。它:

從 cookie、路徑名、瀏覽器偏好或 baseLocale 解決區域設置
如果需要添加或移除區域前綴，則對傳入的路徑名進行標準化
為重定向、重寫或通過請求創建正確的 NextResponse
使用 init() 中的政策寫入地區偏好 cookie
轉發您的應用程式稍後可以讀取的區域感知請求標頭

對於正常情況，這已經足夠了：

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 cookie
路徑中的區域前綴
瀏覽器偏好設定
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。當它被禁用時，它會更新語言狀態並刷新路由。

區域感知連結

有兩個有用的客戶端助手：

tsx

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

useLocalizedHref() 建立區域感知的內部 hrefs。
useUnlocalizedPathname() 讓你在比較路由時不必擔心當前的語言前綴。

翻譯的元數據

generateWaysMetadata() 可以為您翻譯字符串元數據字段。

tsx

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

當路徑路由啟用時，適配器還會發出特定於區域的標準和替代語言網址。

中介軟體組合

適配器並不假設它擁有您的整個中介軟體。waysMiddleware() 可以在您的身份驗證層中調用，或使用 transformRequestHeaders 和 transformResponse 進行自定義。

下一首曲目中應該包含什麼

在此記錄行為，當其依賴於：

中介軟體
路徑前綴
翻譯的元數據
SSR 語言環境解析

如果這個行為只是 React 渲染，那麼它應該放在 React 路徑中。

Next.js 使用

下一個適配器是大多數路由特定行為所在的地方。

路徑路由

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。它:

從 cookie、路徑名、瀏覽器偏好或 baseLocale 解決區域設置
如果需要添加或移除區域前綴，則對傳入的路徑名進行標準化
為重定向、重寫或通過請求創建正確的 NextResponse
使用 init() 中的政策寫入地區偏好 cookie
轉發您的應用程式稍後可以讀取的區域感知請求標頭

對於正常情況，這已經足夠了：

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 cookie
路徑中的區域前綴
瀏覽器偏好設定
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。當它被禁用時，它會更新語言狀態並刷新路由。

區域感知連結

有兩個有用的客戶端助手：

tsx

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

useLocalizedHref() 建立區域感知的內部 hrefs。
useUnlocalizedPathname() 讓你在比較路由時不必擔心當前的語言前綴。

翻譯的元數據

generateWaysMetadata() 可以為您翻譯字符串元數據字段。

tsx

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

當路徑路由啟用時，適配器還會發出特定於區域的標準和替代語言網址。

中介軟體組合

適配器並不假設它擁有您的整個中介軟體。waysMiddleware() 可以在您的身份驗證層中調用，或使用 transformRequestHeaders 和 transformResponse 進行自定義。

下一首曲目中應該包含什麼

在此記錄行為，當其依賴於：

中介軟體
路徑前綴
翻譯的元數據
SSR 語言環境解析

如果這個行為只是 React 渲染，那麼它應該放在 React 路徑中。

Next.js 使用

下一個適配器是大多數路由特定行為所在的地方。

路徑路由

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。它:

從 cookie、路徑名、瀏覽器偏好或 baseLocale 解決區域設置
如果需要添加或移除區域前綴，則對傳入的路徑名進行標準化
為重定向、重寫或通過請求創建正確的 NextResponse
使用 init() 中的政策寫入地區偏好 cookie
轉發您的應用程式稍後可以讀取的區域感知請求標頭

對於正常情況，這已經足夠了：

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 cookie
路徑中的區域前綴
瀏覽器偏好設定
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。當它被禁用時，它會更新語言狀態並刷新路由。

區域感知連結

有兩個有用的客戶端助手：

tsx

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

useLocalizedHref() 建立區域感知的內部 hrefs。
useUnlocalizedPathname() 讓你在比較路由時不必擔心當前的語言前綴。

翻譯的元數據

generateWaysMetadata() 可以為您翻譯字符串元數據字段。

tsx

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

當路徑路由啟用時，適配器還會發出特定於區域的標準和替代語言網址。

中介軟體組合

適配器並不假設它擁有您的整個中介軟體。waysMiddleware() 可以在您的身份驗證層中調用，或使用 transformRequestHeaders 和 transformResponse 進行自定義。

下一首曲目中應該包含什麼

在此記錄行為，當其依賴於：

中介軟體
路徑前綴
翻譯的元數據
SSR 語言環境解析

如果這個行為只是 React 渲染，那麼它應該放在 React 路徑中。

Next.js 使用

下一個適配器是大多數路由特定行為所在的地方。

路徑路由

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。它:

從 cookie、路徑名、瀏覽器偏好或 baseLocale 解決區域設置
如果需要添加或移除區域前綴，則對傳入的路徑名進行標準化
為重定向、重寫或通過請求創建正確的 NextResponse
使用 init() 中的政策寫入地區偏好 cookie
轉發您的應用程式稍後可以讀取的區域感知請求標頭

對於正常情況，這已經足夠了：

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 cookie
路徑中的區域前綴
瀏覽器偏好設定
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。當它被禁用時，它會更新語言狀態並刷新路由。

區域感知連結

有兩個有用的客戶端助手：

tsx

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

useLocalizedHref() 建立區域感知的內部 hrefs。
useUnlocalizedPathname() 讓你在比較路由時不必擔心當前的語言前綴。

翻譯的元數據

generateWaysMetadata() 可以為您翻譯字符串元數據字段。

tsx

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

當路徑路由啟用時，適配器還會發出特定於區域的標準和替代語言網址。

中介軟體組合

適配器並不假設它擁有您的整個中介軟體。waysMiddleware() 可以在您的身份驗證層中調用，或使用 transformRequestHeaders 和 transformResponse 進行自定義。

下一首曲目中應該包含什麼

在此記錄行為，當其依賴於：

中介軟體
路徑前綴
翻譯的元數據
SSR 語言環境解析

如果這個行為只是 React 渲染，那麼它應該放在 React 路徑中。