Intlayer项目：如何从Cookies/Headers中获取语言区域设置-优快云博客

Intlayer项目：如何从Cookies/Headers中获取语言区域设置

intlayer Internationalisation solution for JS application. Make your Vite, React, Next or Express application multilingue. 项目地址: https://gitcode.com/gh_mirrors/in/intlayer

前言

在现代多语言Web应用中，正确处理用户的语言区域设置(locale)至关重要。Intlayer项目提供了一套完整的解决方案，帮助开发者轻松管理多语言环境。本文将详细介绍如何从Cookies和Headers中获取语言区域设置，以及Intlayer提供的各种实用方法。

推荐方法：使用Hooks

useLocale Hook

Intlayer推荐使用useLocale钩子来获取当前语言设置，这是最简单且自动化的方式。这个钩子会自动解析当前环境中的语言设置，类似于Vue.js中的useLocale组合式函数。

import { useLocale } from "next-intlayer";
// 或 import { useLocale } from "react-intlayer";
// 或 import { useLocale } from "vue-intlayer";

// 客户端使用
const { locale } = useLocale();

服务端组件中的使用

对于Next.js等服务端组件，Intlayer提供了专门的服务器端版本：

import { useLocale } from "next-intlayer/server";

const Test = () => {
  const { locale } = useLocale();
  return <>{locale}</>;
};

const Page = async ({ params }) => {
  const { locale } = await params;

  return (
    <IntlayerServerProvider locale={locale}>
      <Test />
    </IntlayerServerProvider>
  );
};

useLocaleCookie Hook

如果只需要获取Cookie中的语言设置，可以使用专门的useLocaleCookie钩子：

import { useLocaleCookie } from "next-intlayer";

const { locale } = useLocaleCookie();

自定义Cookie配置

Intlayer允许开发者自定义存储语言设置的Cookie名称：

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  middleware: {
    cookieName: "myCustomLocaleCookie", // 默认为'intlayer-locale'
  },
};

export default config;

手动获取Cookie值

客户端获取

使用默认Cookie名称获取：

const locale = document.cookie
  .split("; ")
  .find((row) => row.startsWith("intlayer-locale="))
  ?.split("=")[1];

使用自定义Cookie名称获取：

const locale = document.cookie
  .split("; ")
  .find((row) => row.startsWith("myCustomLocaleCookie="))
  ?.split("=")[1];

服务端获取(Next.js)

使用默认Cookie名称：

import { cookies } from "next/headers";

const locale = cookies().get("intlayer-locale")?.value;

使用自定义Cookie名称：

const locale = cookies().get("myCustomLocaleCookie")?.value;

处理未设置Cookie的情况

当用户首次访问网站且尚未明确选择语言时，Cookie可能尚未设置。此时，Intlayer可以从请求头中检测用户偏好的语言。

从请求头检测语言

Intlayer提供了localeDetector函数，可以解析浏览器发送的accept-language等头部信息：

import { localeDetector } from "@intlayer/core";

// 示例请求头
const exampleNegotiatorHeaders = {
  "accept-language": "en-US,en;q=0.9,fr;q=0.8,es;q=0.7",
  "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
  "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
};

// 使用示例
const detectedLocale = localeDetector(exampleNegotiatorHeaders);

accept-language头部包含了用户偏好的语言列表及其权重(q值)，格式如下：