LocaleDetector 组件

LocaleDetector 组件

概述

LocaleDetector 是一个客户端组件，用于在首次访问时自动检测并保存用户的语言偏好到 cookie，确保语言选择被记住而无需用户手动设置。

文件路径

src/components/providers/locale-detector.tsx

功能特性

  • 自动语言检测: 使用 next-intl 的自动检测功能
  • Cookie 持久化: 将检测到的语言保存到 cookie
  • 避免重复设置: 检查 cookie 是否已存在
  • 无 UI 渲染: 组件不渲染任何 DOM 元素

工作原理

  1. 组件使用 useLocale() 获取当前语言（可能是自动检测的）
  2. 检查是否存在 locale cookie
  3. 如果不存在，将当前语言写入 cookie（1 年有效期）
  4. 后续访问将使用 cookie 中的语言设置

使用示例

import { LocaleDetector } from "@/components/providers/locale-detector";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <LocaleDetector />
        {children}
      </body>
    </html>
  );
}
const LOCALE_COOKIE = "NEXT_LOCALE";  // 来自 @/lib/i18n/config

document.cookie = `${LOCALE_COOKIE}=${locale}; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
属性值说明
NameNEXT_LOCALECookie 名称
Path/全站可用
Max-Age1 year有效期 1 年
SameSiteLax安全级别

依赖

  • next-intl - useLocale hook
  • @/lib/i18n/config - LOCALE_COOKIE 常量

注意事项

  1. 组件必须在客户端渲染（"use client"）
  2. 组件返回 null，不渲染任何 UI
  3. 只在首次访问时设置 cookie（如果尚未设置）
  4. 通常放在 layout.tsx 的 body 开头
  5. 与 next-intl 的自动语言检测配合使用

相关配置

@/lib/i18n/config.ts:

export const LOCALE_COOKIE = "NEXT_LOCALE";

工作流程

用户首次访问
    ↓
next-intl 自动检测语言（基于浏览器设置）
    ↓
LocaleDetector 检查 cookie
    ↓
cookie 不存在 → 写入检测到的语言
    ↓
后续访问使用 cookie 中的语言
← 返回目录