---
createdAt: 2025-05-20
updatedAt: 2025-06-29
title: クッキー / ヘッダーからロケールを取得する方法
description: クッキー / ヘッダーからロケールを取得する方法を学びます。
keywords:
  - クッキー
  - ヘッダー
  - intlayer
  - ロケール
  - フック
  - useLocale
  - useLocaleCookie
  - next.js
  - react-intlayer
  - vue-intlayer
slugs:
  - frequent-questions
  - get-locale-cookie
---

# クッキー / ヘッダーからロケールを取得する方法

## フックの使用（推奨）

ほとんどのユースケースでは、`useLocale` フックを使用して現在のロケールを取得することを推奨します。これは自動的に解決されます。Vue.js の `useLocale` コンポーザブルと同様に動作します。

```ts
import { useLocale } from "next-intlayer";
// or import { useLocale } from "react-intlayer";
// or import { useLocale } from "vue-intlayer";

ts;
// クライアントサイドでの使用例
const { locale } = useLocale();
```

サーバーコンポーネントの場合は、以下からインポートできます:

```tsx
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` フックもあります。

## 手動でのクッキー設定

カスタムクッキー名を次のように宣言できます。

```ts
import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  middleware: {
    cookieName: "myCustomLocaleCookie", // デフォルトは 'intlayer-locale'
  },
};

export default config;
```

それを取得する方法は以下の通りです。

### クライアントサイド

```ts
// デフォルトのクッキー名を使用する場合
const locale = document.cookie
  .split("; ")
  .find((row) => row.startsWith("intlayer-locale="))
  ?.split("=")[1];

// カスタムクッキー名を使用する場合
const locale = document.cookie
  .split("; ")
  .find((row) => row.startsWith("myCustomLocaleCookie="))
  ?.split("=")[1];
```

### サーバーサイド（Next.js）

```ts
import { cookies } from "next/headers";

// デフォルトのクッキー名を使用する場合
const locale = cookies().get("intlayer-locale")?.value;

// カスタムクッキー名を使用する場合
const locale = cookies().get("myCustomLocaleCookie")?.value;
```

### localeがまだ設定されていない場合

localeはユーザーが明示的にlocaleを選択したときにのみクッキーとして設定されます。デフォルトでは、新しい訪問者に対しては、localeはヘッダーのフィールドから解釈されます。

ユーザーの優先するロケールはリクエストヘッダーから検出できます。以下はその処理例です：

```ts
/**
 * リクエストヘッダーからロケールを検出する
 *
 * accept-language ヘッダーはロケール検出において最も重要です。
 * これは言語コードと品質値（q値）のリストを含み、
 * ユーザーの優先言語を優先順位順に示します。
 *
 * 例: "en-US,en;q=0.9,fr;q=0.8,es;q=0.7"
 * - en-US は第一優先言語（q=1.0が暗黙的に設定されている）
 * - en は第二選択肢（q=0.9）
 * - fr は第三選択肢（q=0.8）
 * - es は第四選択肢（q=0.7）
 */
import { localeDetector } from "@intlayer/core";

/**
 * ブラウザが通常送信するネゴシエーターヘッダーの例
 * これらのヘッダーはユーザーの優先言語を判定するのに役立ちます
 */
const exampleNegotiatorHeaders: Record<string, string> = {
  "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);
```
