عمل موقع متعدد اللغات بإستخدام Gatsby

يمكنك إستخدام   gatsby-plugin-intl لإنشاء موقع متعدد اللغات وذلك كالتالي 

npm install gatsby-plugin-intl

بعد ذلك في ملف gatsby-config.js نقوم بإضافة الإعدادات الخاصه بالإضافة كالتالي 

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-intl`,
      options: {
        // المسار الذي سيتواجد به ملفات الترجمه
        path: `${__dirname}/src/langs`,
        // اللغات التي تود إستخدامها 
        languages: [`ar`, `en`],
        // اللغة الإفتراضية للموقع
        defaultLanguage: `ar`,
      },
    },
  ],
}

بعد ذلك في المسار الذي حددته تقوم بإنشاء ملف خاص بكل لغه يحتوي على ترجمة المصطلحات المطلوبه ولكن لابد من مراعاة بعض الأمور 

• لابد أن يكون إسم الملف كالتالي "[language].json" ف علي سبيل المثال "ar.json" "en.json"
• لابد من إستخدام نفس ال id الدال على الترجمه في كل ملف بحيث يكون شكل الملفات الناتجة كالتالي 

// ar.json
{
  "aboutUs": "عنا",
  "comments": "التعليقات",
  "home": "الصفحة الرئيسية"
}


// وفي ملف en.json

{
  "aboutUs": "about us",
  "comments": "Comments",
  "home": "Home Page"
}

بعد ذلك يمكنك تطبيق الترجمه داخل كل مكون او صفحة كالتالي 

import React from "react"
import { useIntl } from "gatsby-plugin-intl"

export default function Index() {
  const intl = useIntl()
  const locale = intl.locale !== "en" ? `/${intl.locale}` : ""
return (
<div>{intl.formatMessage({ id: "home" })}</div>
)
}

حيث أنه بإستخدام "formatMessage" وتمرير ال id الذي نريد إيجاد الترجمة الخاصة به سوف يتم توليد المحتوى المطلوب على حسب اللغة المختاره

يتبقى لنا أن نعرف كيف نقوم بالتبديل بين اللغات المتوفرة لدينا وذلك كالتالي

import React from "react"
import { Link } from "gatsby"

export default function LanguageSelector({ label, className }) {

  return (
    <div>
      <ul>
        <li>
          <Link to="/en">En</Link>
        </li>
        <li>
          <Link to="/">Ar</Link>
        </li>
      </ul>
    </div>
  )
}