كيفية استرجاع اللغة من الكوكيز / الرؤوس

استخدام الهوكس (مُوصى به)

في معظم حالات الاستخدام، يُنصح باسترجاع اللغة الحالية باستخدام هوك useLocale لأنه يتم حله تلقائيًا. هذا يعمل بطريقة مشابهة للـ useLocale القابل للاستخدام في Vue.js.

import { useLocale } from "next-intlayer";// أو import { useLocale } من "react-intlayer";// أو import { useLocale } من "vue-intlayer";// استخدام جانب العميلconst { locale } = useLocale();

import { useLocale } from "next-intlayer";// أو import { useLocale } من "react-intlayer";// أو import { 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>  );};

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 الذي يحل فقط قيمة الكوكيز.

تكوين الكوكيز يدويًا

يمكنك إعلان اسم كوكيز مخصص كما يلي

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  middleware: {    cookieName: "myCustomLocaleCookie", // الافتراضي هو 'intlayer-locale'  },};export default config;

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  middleware: {    cookieName: "myCustomLocaleCookie", // الافتراضي هو 'intlayer-locale'  },};export default config;

استرجاعها كما يلي

جانب العميل

// استخدام اسم الكوكيز الافتراضي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];

// استخدام اسم الكوكيز الافتراضي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)

import { cookies } from "next/headers";// استخدام اسم الكوكيز الافتراضيconst locale = cookies().get("intlayer-locale")?.value;// استخدام اسم كوكيز مخصصconst locale = cookies().get("myCustomLocaleCookie")?.value;

import { cookies } from "next/headers";// استخدام اسم الكوكيز الافتراضيconst locale = cookies().get("intlayer-locale")?.value;// استخدام اسم كوكيز مخصصconst locale = cookies().get("myCustomLocaleCookie")?.value;

إذا لم يتم تعيين اللغة بعد

يتم تعيين اللغة ككوكيز فقط بمجرد أن يختار المستخدم اللغة صراحةً. بشكل افتراضي، للزوار الجدد، يتم تفسير اللغة من حقول الرؤوس.

يمكنك اكتشاف اللغة المفضلة للمستخدم من رؤوس الطلب. فيما يلي مثال على كيفية التعامل مع ذلك:

/** * يكتشف اللغة من رؤوس الطلب * * رأس 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";/** * مثال على رؤوس المفاوضة التي ترسلها المتصفحات عادةً * تساعد هذه الرؤوس في تحديد اللغة المفضلة للمستخدم */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);

/** * يكتشف اللغة من رؤوس الطلب * * رأس 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";/** * مثال على رؤوس المفاوضة التي ترسلها المتصفحات عادةً * تساعد هذه الرؤوس في تحديد اللغة المفضلة للمستخدم */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);