Next.js 使用

Next适配器是大多数路由特定行为所在的地方。

路径路由

路径路由 住在 初始化() 你给适配器的选项。

// src/lib/ways.ts
导入 { init 作为 initWays } 从 '@18ways/next/server';
 
导出 常量 {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard'],
  },
});

这告诉适配器中间件应该本地化哪些路径。

在该配置就位后：

/定价 可以变成 /fr-FR/定价
/仪表板 保持 /仪表板

适配器还会自动排除明显的非页面路由，例如/_next和/api.

中间件流程

waysMiddleware() 是来自 init() 的中间件 API。它:

从 cookie、路径名、浏览器偏好或中解析区域设置，baseLocale
如果需要添加或移除区域设置前缀，则规范化传入的路径名
创建正确的NextResponse用于重定向、重写或透传请求
使用来自的策略写入区域设置首选项 cookieinit()
转发您的应用可以稍后读取的区域设置请求头

对于正常情况，这就足够了:

tsx

// src/middleware.ts
导入 类型 { NextRequest } 从 'next/server';
导入 { waysMiddleware } 从 '@/lib/ways';
 
导出 默认 函数 middleware(
  request: NextRequest
) {
  返回 waysMiddleware(request);
}

当您需要自定义中间件结果时，请明确传递选项：

tsx

返回 waysMiddleware(请求, {
  /**
   * 默认为 noop。
   * 使用此方法在
   * 响应创建之前添加或替换
   * 请求头。
   */
  transformRequestHeaders: (上下文) =>
    上下文.requestHeaders,
 
  /**
   * 默认为 noop。
   * 使用此方法装饰或替换
   * 最终的 NextResponse。
   */
  transformResponse: (response) => response,
});

获取 transformRequestHeaders 或 transformResponse 仅在您需要在默认中间件结果之上添加额外行为时使用。

区域设置解析顺序

当前适配器按以下顺序解析区域设置：

18种方式_locale 饼干
路径中的区域设置前缀
浏览器偏好设置
基础语言环境

这个顺序很重要，因为它允许明确的用户偏好覆盖其他所有内容。

客户端区域设置更改

使用 useLocale() 从 @18ways/next/client.

tsx

'使用客户端';
 
导入 {
  语言切换器,
} 来自 '@18ways/react';
导入 { 使用语言环境 } 来自 '@18ways/next/client';
 
导出 函数 语言控制() {
  常量 { 语言环境, 设置语言环境 } = 使用语言环境();
 
  返回 (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

使用 useLocale() 当你想要自己的控件时。使用 LanguageSwitcher 当你想要与相同语言环境状态连接的现成选择器时。

当路径路由启用时，setLocale() 会更新 URL。当它被禁用时，它会更新语言环境状态并刷新路由。

区域感知链接

有两个有用的客户端助手：

tsx

导入 {
  使用本地化链接,
  使用非本地化路径名,
} 从 '@18ways/next/client';

useLocalizedHref()构建区域感知的内部链接。
useUnlocalizedPathname() 让你可以比较路线，而不必担心当前区域设置的前缀。

这些链接应遵循您的中间件强制执行的相同规则。如果中间件正在为某个路由添加或删除区域前缀，useLocalizedHref()应该是您在客户端使用的助手。

翻译后的元数据

generateWaysMetadata()可以为您翻译字符串元数据字段。

tsx

导出 异步 函数 生成元数据() {
  返回 生成方式元数据((t) => ({
    标题: t('定价'),
    描述: t(
      '运行时翻译的简单定价'
    ),
  }));
}

当路径路由启用时，适配器还会发出特定于区域的规范和备用语言 URL。

中间件组合

适配器并不假设它拥有您的整个中间件。waysMiddleware()可以在您的认证层内部调用，或与transformRequestHeaders和transformResponse一起自定义。

下一曲目中包含什么

在此记录行为，当其依赖于：

中间件
路径前缀
翻译后的元数据
SSR 语言环境解析

如果行为只是 React 渲染，那么它应该放在 React 路径中。

Next.js 使用

Next适配器是大多数路由特定行为所在的地方。

路径路由

路径路由 住在 初始化() 你给适配器的选项。

// src/lib/ways.ts
导入 { init 作为 initWays } 从 '@18ways/next/server';
 
导出 常量 {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard'],
  },
});

这告诉适配器中间件应该本地化哪些路径。

在该配置就位后：

/定价 可以变成 /fr-FR/定价
/仪表板 保持 /仪表板

适配器还会自动排除明显的非页面路由，例如/_next和/api.

中间件流程

waysMiddleware() 是来自 init() 的中间件 API。它:

从 cookie、路径名、浏览器偏好或中解析区域设置，baseLocale
如果需要添加或移除区域设置前缀，则规范化传入的路径名
创建正确的NextResponse用于重定向、重写或透传请求
使用来自的策略写入区域设置首选项 cookieinit()
转发您的应用可以稍后读取的区域设置请求头

对于正常情况，这就足够了:

tsx

// src/middleware.ts
导入 类型 { NextRequest } 从 'next/server';
导入 { waysMiddleware } 从 '@/lib/ways';
 
导出 默认 函数 middleware(
  request: NextRequest
) {
  返回 waysMiddleware(request);
}

当您需要自定义中间件结果时，请明确传递选项：

tsx

返回 waysMiddleware(请求, {
  /**
   * 默认为 noop。
   * 使用此方法在
   * 响应创建之前添加或替换
   * 请求头。
   */
  transformRequestHeaders: (上下文) =>
    上下文.requestHeaders,
 
  /**
   * 默认为 noop。
   * 使用此方法装饰或替换
   * 最终的 NextResponse。
   */
  transformResponse: (response) => response,
});

获取 transformRequestHeaders 或 transformResponse 仅在您需要在默认中间件结果之上添加额外行为时使用。

区域设置解析顺序

当前适配器按以下顺序解析区域设置：

18种方式_locale 饼干
路径中的区域设置前缀
浏览器偏好设置
基础语言环境

这个顺序很重要，因为它允许明确的用户偏好覆盖其他所有内容。

客户端区域设置更改

使用 useLocale() 从 @18ways/next/client.

tsx

'使用客户端';
 
导入 {
  语言切换器,
} 来自 '@18ways/react';
导入 { 使用语言环境 } 来自 '@18ways/next/client';
 
导出 函数 语言控制() {
  常量 { 语言环境, 设置语言环境 } = 使用语言环境();
 
  返回 (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

使用 useLocale() 当你想要自己的控件时。使用 LanguageSwitcher 当你想要与相同语言环境状态连接的现成选择器时。

当路径路由启用时，setLocale() 会更新 URL。当它被禁用时，它会更新语言环境状态并刷新路由。

区域感知链接

有两个有用的客户端助手：

tsx

导入 {
  使用本地化链接,
  使用非本地化路径名,
} 从 '@18ways/next/client';

useLocalizedHref()构建区域感知的内部链接。
useUnlocalizedPathname() 让你可以比较路线，而不必担心当前区域设置的前缀。

这些链接应遵循您的中间件强制执行的相同规则。如果中间件正在为某个路由添加或删除区域前缀，useLocalizedHref()应该是您在客户端使用的助手。

翻译后的元数据

generateWaysMetadata()可以为您翻译字符串元数据字段。

tsx

导出 异步 函数 生成元数据() {
  返回 生成方式元数据((t) => ({
    标题: t('定价'),
    描述: t(
      '运行时翻译的简单定价'
    ),
  }));
}

当路径路由启用时，适配器还会发出特定于区域的规范和备用语言 URL。

中间件组合

适配器并不假设它拥有您的整个中间件。waysMiddleware()可以在您的认证层内部调用，或与transformRequestHeaders和transformResponse一起自定义。

下一曲目中包含什么

在此记录行为，当其依赖于：

中间件
路径前缀
翻译后的元数据
SSR 语言环境解析

如果行为只是 React 渲染，那么它应该放在 React 路径中。

Next.js 使用

Next适配器是大多数路由特定行为所在的地方。

路径路由

路径路由 住在 初始化() 你给适配器的选项。

// src/lib/ways.ts
导入 { init 作为 initWays } 从 '@18ways/next/server';
 
导出 常量 {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard'],
  },
});

这告诉适配器中间件应该本地化哪些路径。

在该配置就位后：

/定价 可以变成 /fr-FR/定价
/仪表板 保持 /仪表板

适配器还会自动排除明显的非页面路由，例如/_next和/api.

中间件流程

waysMiddleware() 是来自 init() 的中间件 API。它:

从 cookie、路径名、浏览器偏好或中解析区域设置，baseLocale
如果需要添加或移除区域设置前缀，则规范化传入的路径名
创建正确的NextResponse用于重定向、重写或透传请求
使用来自的策略写入区域设置首选项 cookieinit()
转发您的应用可以稍后读取的区域设置请求头

对于正常情况，这就足够了:

tsx

// src/middleware.ts
导入 类型 { NextRequest } 从 'next/server';
导入 { waysMiddleware } 从 '@/lib/ways';
 
导出 默认 函数 middleware(
  request: NextRequest
) {
  返回 waysMiddleware(request);
}

当您需要自定义中间件结果时，请明确传递选项：

tsx

返回 waysMiddleware(请求, {
  /**
   * 默认为 noop。
   * 使用此方法在
   * 响应创建之前添加或替换
   * 请求头。
   */
  transformRequestHeaders: (上下文) =>
    上下文.requestHeaders,
 
  /**
   * 默认为 noop。
   * 使用此方法装饰或替换
   * 最终的 NextResponse。
   */
  transformResponse: (response) => response,
});

获取 transformRequestHeaders 或 transformResponse 仅在您需要在默认中间件结果之上添加额外行为时使用。

区域设置解析顺序

当前适配器按以下顺序解析区域设置：

18种方式_locale 饼干
路径中的区域设置前缀
浏览器偏好设置
基础语言环境

这个顺序很重要，因为它允许明确的用户偏好覆盖其他所有内容。

客户端区域设置更改

使用 useLocale() 从 @18ways/next/client.

tsx

'使用客户端';
 
导入 {
  语言切换器,
} 来自 '@18ways/react';
导入 { 使用语言环境 } 来自 '@18ways/next/client';
 
导出 函数 语言控制() {
  常量 { 语言环境, 设置语言环境 } = 使用语言环境();
 
  返回 (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

使用 useLocale() 当你想要自己的控件时。使用 LanguageSwitcher 当你想要与相同语言环境状态连接的现成选择器时。

当路径路由启用时，setLocale() 会更新 URL。当它被禁用时，它会更新语言环境状态并刷新路由。

区域感知链接

有两个有用的客户端助手：

tsx

导入 {
  使用本地化链接,
  使用非本地化路径名,
} 从 '@18ways/next/client';

useLocalizedHref()构建区域感知的内部链接。
useUnlocalizedPathname() 让你可以比较路线，而不必担心当前区域设置的前缀。

这些链接应遵循您的中间件强制执行的相同规则。如果中间件正在为某个路由添加或删除区域前缀，useLocalizedHref()应该是您在客户端使用的助手。

翻译后的元数据

generateWaysMetadata()可以为您翻译字符串元数据字段。

tsx

导出 异步 函数 生成元数据() {
  返回 生成方式元数据((t) => ({
    标题: t('定价'),
    描述: t(
      '运行时翻译的简单定价'
    ),
  }));
}

当路径路由启用时，适配器还会发出特定于区域的规范和备用语言 URL。

中间件组合

适配器并不假设它拥有您的整个中间件。waysMiddleware()可以在您的认证层内部调用，或与transformRequestHeaders和transformResponse一起自定义。

下一曲目中包含什么

在此记录行为，当其依赖于：

中间件
路径前缀
翻译后的元数据
SSR 语言环境解析

如果行为只是 React 渲染，那么它应该放在 React 路径中。

Next.js 使用

Next适配器是大多数路由特定行为所在的地方。

路径路由

路径路由 住在 初始化() 你给适配器的选项。

// src/lib/ways.ts
导入 { init 作为 initWays } 从 '@18ways/next/server';
 
导出 常量 {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard'],
  },
});

这告诉适配器中间件应该本地化哪些路径。

在该配置就位后：

/定价 可以变成 /fr-FR/定价
/仪表板 保持 /仪表板

适配器还会自动排除明显的非页面路由，例如/_next和/api.

中间件流程

waysMiddleware() 是来自 init() 的中间件 API。它:

从 cookie、路径名、浏览器偏好或中解析区域设置，baseLocale
如果需要添加或移除区域设置前缀，则规范化传入的路径名
创建正确的NextResponse用于重定向、重写或透传请求
使用来自的策略写入区域设置首选项 cookieinit()
转发您的应用可以稍后读取的区域设置请求头

对于正常情况，这就足够了:

tsx

// src/middleware.ts
导入 类型 { NextRequest } 从 'next/server';
导入 { waysMiddleware } 从 '@/lib/ways';
 
导出 默认 函数 middleware(
  request: NextRequest
) {
  返回 waysMiddleware(request);
}

当您需要自定义中间件结果时，请明确传递选项：

tsx

返回 waysMiddleware(请求, {
  /**
   * 默认为 noop。
   * 使用此方法在
   * 响应创建之前添加或替换
   * 请求头。
   */
  transformRequestHeaders: (上下文) =>
    上下文.requestHeaders,
 
  /**
   * 默认为 noop。
   * 使用此方法装饰或替换
   * 最终的 NextResponse。
   */
  transformResponse: (response) => response,
});

获取 transformRequestHeaders 或 transformResponse 仅在您需要在默认中间件结果之上添加额外行为时使用。

区域设置解析顺序

当前适配器按以下顺序解析区域设置：

18种方式_locale 饼干
路径中的区域设置前缀
浏览器偏好设置
基础语言环境

这个顺序很重要，因为它允许明确的用户偏好覆盖其他所有内容。

客户端区域设置更改

使用 useLocale() 从 @18ways/next/client.

tsx

'使用客户端';
 
导入 {
  语言切换器,
} 来自 '@18ways/react';
导入 { 使用语言环境 } 来自 '@18ways/next/client';
 
导出 函数 语言控制() {
  常量 { 语言环境, 设置语言环境 } = 使用语言环境();
 
  返回 (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

使用 useLocale() 当你想要自己的控件时。使用 LanguageSwitcher 当你想要与相同语言环境状态连接的现成选择器时。

当路径路由启用时，setLocale() 会更新 URL。当它被禁用时，它会更新语言环境状态并刷新路由。

区域感知链接

有两个有用的客户端助手：

tsx

导入 {
  使用本地化链接,
  使用非本地化路径名,
} 从 '@18ways/next/client';

useLocalizedHref()构建区域感知的内部链接。
useUnlocalizedPathname() 让你可以比较路线，而不必担心当前区域设置的前缀。

这些链接应遵循您的中间件强制执行的相同规则。如果中间件正在为某个路由添加或删除区域前缀，useLocalizedHref()应该是您在客户端使用的助手。

翻译后的元数据

generateWaysMetadata()可以为您翻译字符串元数据字段。

tsx

导出 异步 函数 生成元数据() {
  返回 生成方式元数据((t) => ({
    标题: t('定价'),
    描述: t(
      '运行时翻译的简单定价'
    ),
  }));
}

当路径路由启用时，适配器还会发出特定于区域的规范和备用语言 URL。

中间件组合

适配器并不假设它拥有您的整个中间件。waysMiddleware()可以在您的认证层内部调用，或与transformRequestHeaders和transformResponse一起自定义。

下一曲目中包含什么

在此记录行为，当其依赖于：

中间件
路径前缀
翻译后的元数据
SSR 语言环境解析

如果行为只是 React 渲染，那么它应该放在 React 路径中。

Next.js 使用

Next适配器是大多数路由特定行为所在的地方。

路径路由

路径路由 住在 初始化() 你给适配器的选项。

// src/lib/ways.ts
导入 { init 作为 initWays } 从 '@18ways/next/server';
 
导出 常量 {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard'],
  },
});

这告诉适配器中间件应该本地化哪些路径。

在该配置就位后：

/定价 可以变成 /fr-FR/定价
/仪表板 保持 /仪表板

适配器还会自动排除明显的非页面路由，例如/_next和/api.

中间件流程

waysMiddleware() 是来自 init() 的中间件 API。它:

从 cookie、路径名、浏览器偏好或中解析区域设置，baseLocale
如果需要添加或移除区域设置前缀，则规范化传入的路径名
创建正确的NextResponse用于重定向、重写或透传请求
使用来自的策略写入区域设置首选项 cookieinit()
转发您的应用可以稍后读取的区域设置请求头

对于正常情况，这就足够了:

tsx

// src/middleware.ts
导入 类型 { NextRequest } 从 'next/server';
导入 { waysMiddleware } 从 '@/lib/ways';
 
导出 默认 函数 middleware(
  request: NextRequest
) {
  返回 waysMiddleware(request);
}

当您需要自定义中间件结果时，请明确传递选项：

tsx

返回 waysMiddleware(请求, {
  /**
   * 默认为 noop。
   * 使用此方法在
   * 响应创建之前添加或替换
   * 请求头。
   */
  transformRequestHeaders: (上下文) =>
    上下文.requestHeaders,
 
  /**
   * 默认为 noop。
   * 使用此方法装饰或替换
   * 最终的 NextResponse。
   */
  transformResponse: (response) => response,
});

获取 transformRequestHeaders 或 transformResponse 仅在您需要在默认中间件结果之上添加额外行为时使用。

区域设置解析顺序

当前适配器按以下顺序解析区域设置：

18种方式_locale 饼干
路径中的区域设置前缀
浏览器偏好设置
基础语言环境

这个顺序很重要，因为它允许明确的用户偏好覆盖其他所有内容。

客户端区域设置更改

使用 useLocale() 从 @18ways/next/client.

tsx

'使用客户端';
 
导入 {
  语言切换器,
} 来自 '@18ways/react';
导入 { 使用语言环境 } 来自 '@18ways/next/client';
 
导出 函数 语言控制() {
  常量 { 语言环境, 设置语言环境 } = 使用语言环境();
 
  返回 (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

使用 useLocale() 当你想要自己的控件时。使用 LanguageSwitcher 当你想要与相同语言环境状态连接的现成选择器时。

当路径路由启用时，setLocale() 会更新 URL。当它被禁用时，它会更新语言环境状态并刷新路由。

区域感知链接

有两个有用的客户端助手：

tsx

导入 {
  使用本地化链接,
  使用非本地化路径名,
} 从 '@18ways/next/client';

useLocalizedHref()构建区域感知的内部链接。
useUnlocalizedPathname() 让你可以比较路线，而不必担心当前区域设置的前缀。

这些链接应遵循您的中间件强制执行的相同规则。如果中间件正在为某个路由添加或删除区域前缀，useLocalizedHref()应该是您在客户端使用的助手。

翻译后的元数据

generateWaysMetadata()可以为您翻译字符串元数据字段。

tsx

导出 异步 函数 生成元数据() {
  返回 生成方式元数据((t) => ({
    标题: t('定价'),
    描述: t(
      '运行时翻译的简单定价'
    ),
  }));
}

当路径路由启用时，适配器还会发出特定于区域的规范和备用语言 URL。

中间件组合

适配器并不假设它拥有您的整个中间件。waysMiddleware()可以在您的认证层内部调用，或与transformRequestHeaders和transformResponse一起自定义。

下一曲目中包含什么

在此记录行为，当其依赖于：

中间件
路径前缀
翻译后的元数据
SSR 语言环境解析

如果行为只是 React 渲染，那么它应该放在 React 路径中。

Next.js 使用

Next适配器是大多数路由特定行为所在的地方。

路径路由

路径路由 住在 初始化() 你给适配器的选项。

// src/lib/ways.ts
导入 { init 作为 initWays } 从 '@18ways/next/server';
 
导出 常量 {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard'],
  },
});

这告诉适配器中间件应该本地化哪些路径。

在该配置就位后：

/定价 可以变成 /fr-FR/定价
/仪表板 保持 /仪表板

适配器还会自动排除明显的非页面路由，例如/_next和/api.

中间件流程

waysMiddleware() 是来自 init() 的中间件 API。它:

从 cookie、路径名、浏览器偏好或中解析区域设置，baseLocale
如果需要添加或移除区域设置前缀，则规范化传入的路径名
创建正确的NextResponse用于重定向、重写或透传请求
使用来自的策略写入区域设置首选项 cookieinit()
转发您的应用可以稍后读取的区域设置请求头

对于正常情况，这就足够了:

tsx

// src/middleware.ts
导入 类型 { NextRequest } 从 'next/server';
导入 { waysMiddleware } 从 '@/lib/ways';
 
导出 默认 函数 middleware(
  request: NextRequest
) {
  返回 waysMiddleware(request);
}

当您需要自定义中间件结果时，请明确传递选项：

tsx

返回 waysMiddleware(请求, {
  /**
   * 默认为 noop。
   * 使用此方法在
   * 响应创建之前添加或替换
   * 请求头。
   */
  transformRequestHeaders: (上下文) =>
    上下文.requestHeaders,
 
  /**
   * 默认为 noop。
   * 使用此方法装饰或替换
   * 最终的 NextResponse。
   */
  transformResponse: (response) => response,
});

获取 transformRequestHeaders 或 transformResponse 仅在您需要在默认中间件结果之上添加额外行为时使用。

区域设置解析顺序

当前适配器按以下顺序解析区域设置：

18种方式_locale 饼干
路径中的区域设置前缀
浏览器偏好设置
基础语言环境

这个顺序很重要，因为它允许明确的用户偏好覆盖其他所有内容。

客户端区域设置更改

使用 useLocale() 从 @18ways/next/client.

tsx

'使用客户端';
 
导入 {
  语言切换器,
} 来自 '@18ways/react';
导入 { 使用语言环境 } 来自 '@18ways/next/client';
 
导出 函数 语言控制() {
  常量 { 语言环境, 设置语言环境 } = 使用语言环境();
 
  返回 (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

使用 useLocale() 当你想要自己的控件时。使用 LanguageSwitcher 当你想要与相同语言环境状态连接的现成选择器时。

当路径路由启用时，setLocale() 会更新 URL。当它被禁用时，它会更新语言环境状态并刷新路由。

区域感知链接

有两个有用的客户端助手：

tsx

导入 {
  使用本地化链接,
  使用非本地化路径名,
} 从 '@18ways/next/client';

useLocalizedHref()构建区域感知的内部链接。
useUnlocalizedPathname() 让你可以比较路线，而不必担心当前区域设置的前缀。

这些链接应遵循您的中间件强制执行的相同规则。如果中间件正在为某个路由添加或删除区域前缀，useLocalizedHref()应该是您在客户端使用的助手。

翻译后的元数据

generateWaysMetadata()可以为您翻译字符串元数据字段。

tsx

导出 异步 函数 生成元数据() {
  返回 生成方式元数据((t) => ({
    标题: t('定价'),
    描述: t(
      '运行时翻译的简单定价'
    ),
  }));
}

当路径路由启用时，适配器还会发出特定于区域的规范和备用语言 URL。

中间件组合

适配器并不假设它拥有您的整个中间件。waysMiddleware()可以在您的认证层内部调用，或与transformRequestHeaders和transformResponse一起自定义。

下一曲目中包含什么

在此记录行为，当其依赖于：

中间件
路径前缀
翻译后的元数据
SSR 语言环境解析

如果行为只是 React 渲染，那么它应该放在 React 路径中。

Next.js 使用

Next适配器是大多数路由特定行为所在的地方。

路径路由

路径路由 住在 初始化() 你给适配器的选项。

// src/lib/ways.ts
导入 { init 作为 initWays } 从 '@18ways/next/server';
 
导出 常量 {
  waysMiddleware,
} = initWays({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  persistLocaleCookie: true,
  pathRouting: {
    exclude: ['/dashboard'],
  },
});

这告诉适配器中间件应该本地化哪些路径。

在该配置就位后：

/定价 可以变成 /fr-FR/定价
/仪表板 保持 /仪表板

适配器还会自动排除明显的非页面路由，例如/_next和/api.

中间件流程

waysMiddleware() 是来自 init() 的中间件 API。它:

从 cookie、路径名、浏览器偏好或中解析区域设置，baseLocale
如果需要添加或移除区域设置前缀，则规范化传入的路径名
创建正确的NextResponse用于重定向、重写或透传请求
使用来自的策略写入区域设置首选项 cookieinit()
转发您的应用可以稍后读取的区域设置请求头

对于正常情况，这就足够了:

tsx

// src/middleware.ts
导入 类型 { NextRequest } 从 'next/server';
导入 { waysMiddleware } 从 '@/lib/ways';
 
导出 默认 函数 middleware(
  request: NextRequest
) {
  返回 waysMiddleware(request);
}

当您需要自定义中间件结果时，请明确传递选项：

tsx

返回 waysMiddleware(请求, {
  /**
   * 默认为 noop。
   * 使用此方法在
   * 响应创建之前添加或替换
   * 请求头。
   */
  transformRequestHeaders: (上下文) =>
    上下文.requestHeaders,
 
  /**
   * 默认为 noop。
   * 使用此方法装饰或替换
   * 最终的 NextResponse。
   */
  transformResponse: (response) => response,
});

获取 transformRequestHeaders 或 transformResponse 仅在您需要在默认中间件结果之上添加额外行为时使用。

区域设置解析顺序

当前适配器按以下顺序解析区域设置：

18种方式_locale 饼干
路径中的区域设置前缀
浏览器偏好设置
基础语言环境

这个顺序很重要，因为它允许明确的用户偏好覆盖其他所有内容。

客户端区域设置更改

使用 useLocale() 从 @18ways/next/client.

tsx

'使用客户端';
 
导入 {
  语言切换器,
} 来自 '@18ways/react';
导入 { 使用语言环境 } 来自 '@18ways/next/client';
 
导出 函数 语言控制() {
  常量 { 语言环境, 设置语言环境 } = 使用语言环境();
 
  返回 (
    <LanguageSwitcher
      currentLocale={locale}
      onLocaleChange={setLocale}
    />
  );
}

使用 useLocale() 当你想要自己的控件时。使用 LanguageSwitcher 当你想要与相同语言环境状态连接的现成选择器时。

当路径路由启用时，setLocale() 会更新 URL。当它被禁用时，它会更新语言环境状态并刷新路由。

区域感知链接

有两个有用的客户端助手：

tsx

导入 {
  使用本地化链接,
  使用非本地化路径名,
} 从 '@18ways/next/client';

useLocalizedHref()构建区域感知的内部链接。
useUnlocalizedPathname() 让你可以比较路线，而不必担心当前区域设置的前缀。

这些链接应遵循您的中间件强制执行的相同规则。如果中间件正在为某个路由添加或删除区域前缀，useLocalizedHref()应该是您在客户端使用的助手。

翻译后的元数据

generateWaysMetadata()可以为您翻译字符串元数据字段。

tsx

导出 异步 函数 生成元数据() {
  返回 生成方式元数据((t) => ({
    标题: t('定价'),
    描述: t(
      '运行时翻译的简单定价'
    ),
  }));
}

当路径路由启用时，适配器还会发出特定于区域的规范和备用语言 URL。

中间件组合

适配器并不假设它拥有您的整个中间件。waysMiddleware()可以在您的认证层内部调用，或与transformRequestHeaders和transformResponse一起自定义。

下一曲目中包含什么

在此记录行为，当其依赖于：

中间件
路径前缀
翻译后的元数据
SSR 语言环境解析

如果行为只是 React 渲染，那么它应该放在 React 路径中。