انتقل إلى المقال
Aniq-UI

SaaS Templateاللغات

اللغات

كيف يعمل الموقع بالإنجليزية والعربية، وأين يوجد كل نص، وما الذي تغيّره لإضافة لغة.

اللغات المتوفرة

اللغةالعنوانالاتجاهالخطوط
الإنجليزية، اللغة الافتراضية/enمن اليسار إلى اليمينDM Sans، مع Clash Display للعناوين
العربية/arمن اليمين إلى اليسارNoto Sans Arabic، مع Almarai للعناوين

كل نص وعنوان زر ووصف صورة ورسالة نموذج وعنوان صفحة موجود باللغتين.

كيف تُختار اللغة

  • اللغة هي الجزء الأول من كل عنوان: /en/pricing و/ar/pricing.
  • الزائر الذي يفتح / يُوجَّه إلى /ar عندما يفضّل متصفحه العربية، وإلى /en في غير ذلك. يقوم بذلك src/proxy.ts.
  • قائمة اللغة في الترويسة تنقل الزائر إلى اللغة الأخرى وتبقيه في الصفحة نفسها.
  • لكل لغة عنوانها ووصفها وعنوانها الأساسي الخاص، وكل صفحة تخبر محركات البحث بمكان اللغة الأخرى.

من اليمين إلى اليسار

في /ar، يضبط src/app/[locale]/layout.tsx الخاصيتين lang="ar" وdir="rtl" على الصفحة، فيتعكس التخطيط كله: القائمة والبطاقات والأسهم والجداول تُقرأ من اليمين إلى اليسار.

تستخدم المكوّنات أصناف Tailwind المنطقية التي تتبع الاتجاه، مثل ms-2 وpe-4 وstart-0 وtext-start. عندما تضيف عناصر، استخدم هذه بدلًا من ml-* أو pr-* أو left-* أو text-left، وإلا ظهرت الصفحة العربية بشكل خاطئ.

تبقى معاينة لوحة التحكم في القسم الرئيسي من اليسار إلى اليمين بكلتا اللغتين، كما تكون لقطة شاشة منتج حقيقي. وتسمياتها مترجمة.

أين توجد النصوص

تُقسَّم النصوص بحسب الصفحة في سبعة مجلدات داخل messages/، في كل منها en.json وar.json:

المجلدما الذي يحتويه
messages/home/أقسام الصفحة الرئيسية ومعاينة لوحة التحكم
messages/layout/الترويسة والتذييل وصفحات الأخطاء واسم الموقع وعنوانه ووصفه
messages/pricing/صفحة الأسعار
messages/blog/صفحات المدونة والمقالات نفسها
messages/contact/صفحة التواصل
messages/auth/صفحات تسجيل الدخول وإنشاء الحساب ونسيان كلمة المرور
messages/legal/صفحات الشروط والخصوصية وملفات تعريف الارتباط وGDPR

غيّر نصًا

  • غيّر القيمة في الملف الإنجليزي وما يقابلها في الملف العربي. أبقِ المفاتيح نفسها في الملفين.
  • المفتاح المفقود من أحد الملفين يظهر اسمه بدل النص في صفحة تلك اللغة.
  • الكلمات بين الأقواس المعقوفة، مثل {year} و{count} و{planName}، يملؤها الموقع. أبقِها كما هي.

تسميات الموقع بالعربية

عندما تكتب عن الموقع بالعربية، استخدم التسميات التي يعرضها:

الإنجليزيةالعربية
Pricingالأسعار
Blogالمدونة
Contactاتصل بنا
Sign Up Nowسجّل الآن
Get Started Freeابدأ مجانًا
Most Popularالأكثر شعبية
Frequently Asked Questionsالأسئلة الشائعة
Send Messageإرسال الرسالة
Sign Inتسجيل الدخول
Subscribeاشترك

أضف لغة

  1. أضف رمزها إلى التوجيه

    أضف رمز اللغة إلى locales في src/i18n/routing.ts، وإلى Locale وlocales وlocaleNames في src/config/i18n.ts. مثلًا للفرنسية:

    src/i18n/routing.ts
    locales: ["en", "ar", "fr"],

  2. أضف ملفات رسائلها

    في كل مجلد من المجلدات السبعة داخل messages/، انسخ en.json برمز اللغة الجديدة وترجم القيم. أبقِ كل مفتاح وكل كلمة بين أقواس معقوفة. لمجلد الصفحة الرئيسية:

    الطرفيةفي Nextjs-landing-page-template-2
    cp messages/home/en.json messages/home/fr.json

  3. أضفها إلى قائمة اللغة

    أضفها إلى قائمة languages في src/components/LanguageSwitcher.tsx، مع بلد العلم الذي تعرضه، مثل { code: "fr", country: "FR" }.

  4. اضبط اتجاهها وخطها، إذا احتاجت إليهما

    تُعامل العربية وحدها على أنها من اليمين إلى اليسار. للغة أخرى بهذا الاتجاه، وسّع فحوص locale === "ar" في src/app/[locale]/layout.tsx وsrc/hooks/locale/useDirection.ts وsrc/features/home/TestimonialsSection/hooks/useTestimonialsCarousel.ts وsrc/features/auth/forgot-password/components/ForgotPasswordForm/components/BackToSignInLink.tsx. ولكتابة لا يغطيها خط DM Sans، أضف خطًا بـ next/font في layout.tsx.

أعد تشغيل yarn dev أو ابنِ من جديد، فتعمل اللغة الجديدة على عنوانها، وهو هنا /fr. وتلتقطها الروابط الأساسية وروابط اللغات وخريطة الموقع تلقائيًا.

توقفت عند خطوة؟

ابحث عن الحل قبل أن تبدأ من جديد.

حل المشكلات

تفضيلات ملفات تعريف الارتباط

نستخدم ملفات تعريف الارتباط لتعزيز تجربة التصفح الخاصة بك وتحليل حركة المرور على الموقع وتخصيص المحتوى. بالنقر على "قبول الكل"، فإنك توافق على استخدامنا لملفات تعريف الارتباط للتحليلات والإعلانات المخصصة.