Як отримати локаль із cookie / заголовків
Використання хуків (рекомендується)
У більшості випадків рекомендовано отримувати поточну локаль за допомогою хука useLocale, оскільки вона вирішується автоматично. Це працює аналогічно до useLocale composable у Vue.js.
import { useLocale } from "next-intlayer";// or import { useLocale } from "react-intlayer";// або імпортуйте { useLocale } з "vue-intlayer";// Використання на клієнтіconst { locale } = useLocale();Для серверних компонентів ви можете імпортувати його з:
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, який лише повертає значення cookie.
Ручна конфігурація cookie
Ви можете задати власну назву cookie, наприклад
import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { middleware: { cookieName: "myCustomLocaleCookie", // за замовчуванням 'intlayer-locale' },};export default config;отримати його наступним чином
На стороні клієнта
// Використання імені cookie за замовчуваннямconst locale = document.cookie .split("; ") .find((row) => row.startsWith("intlayer-locale=")) ?.split("=")[1];// Використання користувацького імені cookieconst locale = document.cookie .split("; ") .find((row) => row.startsWith("myCustomLocaleCookie=")) ?.split("=")[1];На сервері (Next.js)
import { cookies } from "next/headers";// Використання імені cookie за замовчуваннямconst locale = cookies().get("intlayer-locale")?.value;// Використання користувацького імені cookieconst locale = cookies().get("myCustomLocaleCookie")?.value;Якщо локаль ще не встановлена
Локаль встановлюється в cookie лише після того, як користувач явно вибере локаль. За замовчуванням для нових відвідувачів локаль визначається за полями заголовків.
Ви можете визначити бажану локаль користувача з заголовків запиту. Ось приклад, як це можна реалізувати:
/** * Визначає локаль з заголовків запиту * * Заголовок accept-language є найважливішим для визначення локалі. * Він містить список кодів мов зі значеннями якості (q-values), які вказують * пріоритетні мови користувача в порядку переваги. * * Приклад: "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";/** * Приклад negotiator headers, які зазвичай надсилають браузери * Ці заголовки допомагають визначити переважну мову користувача */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);