شوبيفاي هيدروجين أصبح مكتبة تعمل مع أي إطار JavaScript

لو عندك عميل موقعه معمول بـ Next.js وعايز يبيع منتجات، كان قدامك اختيارين وحشين: يا تعيد بناء الموقع كله على هيدروجين، يا تكتب كود السلة والأسعار بإيدك. Shopify غيّرت المعادلة دي في 14 أكتوبر 2026. المقال ده موجّه للسوق العام: الأسعار بالدولار، وبنذكر خيار مصر والخليج لما يفرق.

بصراحة: هذا المقال قراءة في إعلان Shopify الرسمي وتغطية Vercel وتقييم وكالة مستقلة، وليس تجربة على متجر حقيقي. لم نبنِ واجهة بالنسخة الجديدة بعد.

ما الذي تغيّر في شوبيفاي هيدروجين؟

كان هيدروجين (Hydrogen) حتى الآن إطار عمل مبنياً على React Router. إن أردت السلة أو التحليلات الخاصة به، كان عليك بناء الواجهة كلها عليه. النسخة 2026-10 حوّلته إلى مكتبة تضيفها إلى المشروع الذي تعمل عليه أصلاً.

المكتبة تتولى أجزاء المتجر التي يصعب بناؤها بشكل صحيح: سلة التسوق (Cart)، واختيار متغيرات المنتج، وفلاتر المجموعات، والبحث التنبؤي، والأسعار بعملة المشتري عبر Markets، والتحليلات التي تحترم موافقة الزائر، وShop Pay، وحسابات العملاء. أما التوجيه وجلب البيانات والعرض والتصميم فتبقى بيد إطارك.

بحسب Shopify، مرّت النسخة بسبعة إصدارات منذ المعاينة للمطورين في يونيو قبل أن تصبح متاحة للجميع. وتغطية Vercel في يوليو تؤكد الاتجاه نفسه: المكتبة مفتوحة المصدر، وتعمل مع Next.js وNuxt وSvelte أو أي إطار آخر، و«تعمل حيثما يعمل JavaScript».

كيف يبدو الربط عملياً؟

الفكرة أن كود الربط قصير. هذا مثال Shopify لعدّاد سلة يتحدّث تلقائياً في React:

import { createCartComponents } from "@shopify/hydrogen/react";

const { CartProvider, useCart } = createCartComponents();

function CartCount() {
  const count = useCart((cart) => cart.data.totalQuantity);
  return <span>{count}</span>;
}

ولـ Vue الشيء نفسه بصيغة composable، والأطر الأخرى تشترك في حالة السلة مباشرة. وللبدء في مشروع قائم، يكفي أمر واحد:

npx @shopify/hydrogen@latest setup

إن كنت تبدأ من الصفر فأمامك قالبان جاهزان: قالب React Router يُنشر على Oxygen من لوحة تحكم Shopify، وVercel Shop لمن يعمل بـ Next.js، وهو واجهة مبنية على هيدروجين تصونها Vercel.

هيدروجين ووكلاء الذكاء الاصطناعي

تأتي المكتبة مع 20 «مهارة» (Skills) تعلّم وكيل الذكاء الاصطناعي (AI Agent) البرمجي كيف يستخدمها. تقول Shopify إنك إن طلبت من الوكيل «Set up my store with Shopify» فسيبني الصفحة الرئيسية وصفحات المجموعات والبحث والمنتج والسلة والحساب، ويضيف التحليلات، ثم يجري اختباراً سريعاً.

المهارات تُحفظ داخل مشروعك وتطابق نسخة هيدروجين المثبتة، وبعد كل ترقية تحدّثها بالأمر npx @shopify/hydrogen skills sync. والجانب الآخر هو وكلاء التسوق: في المتصفحات التي تدعم WebMCP، يستطيع وكيل أن يبحث في الكتالوج ويحدّث السلة، ثم ترسل Shopify Checkout الطلب بعد تأكيد المشتري.

تنبيه: كود يكتبه وكيل ذكاء اصطناعي لمتجر حي يحتاج مراجعة بشرية قبل النشر، خصوصاً السلة والدفع والتحليلات. «الاختبار السريع» الذي يجريه الوكيل لا يغني عن اختبار طلب حقيقي من أوله لآخره.

الأثر على الفاتورة: المكتبة مجانية والبناء ليس كذلك

المكتبة والاستضافة: هيدروجين مفتوح المصدر، وShopify تؤكد أن Oxygen «ما زال مجانياً»، وتقييم Ask Phill يذكر أنه مضمّن مع كل خطة Shopify دون تكلفة إضافية. كما يمكنك الآن استضافة الواجهة على Vercel أو أي استضافة JavaScript أخرى.

البناء والتشغيل: هنا التكلفة الحقيقية. تقدّر وكالة Ask Phill، وهي وكالة تبيع مشاريع هيدروجين، أن بناء واجهة مركّزة لمتجر قائم يستغرق 2–4 أشهر بتكلفة بين 60 ألفاً و180 ألف يورو، مع فريق تطوير React دائم. هذه أرقام وكالة أوروبية من محفظة عملائها وليست أسعاراً رسمية، لكنها توضح الحجم.

بصراحة: الأرقام الأوروبية لا تنطبق على السوق العربي حرفياً، فتكلفة المطورين أقل بكثير. لكن المنطق نفسه يبقى: الواجهة المنفصلة تعني كوداً يحتاج صيانة مستمرة، وليس مشروعاً تسلّمه وتنساه.

من يستفيد ومن يبقى على Liquid؟

استخدم هيدروجين الجديد إذا:

• كان لديك موقع قائم بـ Next.js أو Nuxt أو React وتريد إضافة متجر Shopify دون إعادة بنائه.
• كنت مطوراً حراً يبني مواقع مخصصة للعملاء ويريد سلة ودفعاً موثوقين بدل كتابتها من الصفر.
• احتجت أسعاراً بعملات متعددة للبيع من موقع واحد، مثلاً لمشترين من دول خليجية مختلفة، عبر Markets وبحسب العملات التي يدعمها متجرك.

ابقَ على ثيمات Liquid إذا:

• كان سبب رغبتك في واجهة منفصلة شكلياً لا قابلاً للقياس. تقييم Ask Phill صريح: ثيم Liquid جيد مع فريق صغير سيتفوق غالباً على أول مشروع هيدروجين.
• لم يكن لديك مطور JavaScript يستطيع صيانة الكود بعد التسليم.
• كان متجرك صغيراً ويعتمد على تطبيقات Shopify الجاهزة.

ملاحظة: هيدروجين لا يضيف اتجاه RTL أو خطاً عربياً بنفسه، لأن التصميم كله بيدك. مسؤولية dir="rtl" واختيار خط مثل Cairo أو Tajawal تقع على إطارك وكود الواجهة.

إن كان لديك متجر هيدروجين قديم

تقول Shopify إن الواجهات الحالية تستمر في العمل كما هي، ولا يلزمك فعل شيء الآن. وعندما تقرر الانتقال، توجد مهارة ترحيل يتبعها وكيلك البرمجي: تحتفظ بصفحاتك ومساراتك، وتغيّر فقط مصدر كود التجارة.

في ووردبريس: الفكرة نفسها موجودة في ووكومرس (WooCommerce) عبر Store API وواجهات منفصلة، لكن لا توجد مكتبة رسمية مكافئة بهذا الشمول. لمعظم متاجر ووكومرس في المنطقة، الواجهة المعتادة بـ Elementor أبسط وأرخص في الصيانة.

الأسئلة الشائعة

س: ما هو شوبيفاي هيدروجين؟
ج: هو مكتبة JavaScript من Shopify تضيف وظائف المتجر، مثل السلة والأسعار وحسابات العملاء، إلى موقع مبني بأي إطار. في نسخته الجديدة لم يعد إطار عمل مستقلاً تبني عليه الموقع كله.

س: هل يعمل هيدروجين مع Next.js؟
ج: نعم. النسخة 2026-10 تقدّم قالباً جاهزاً لـ Next.js وآخر لـ React Router، وتؤكد Vercel دعم Nuxt وSvelte وأطر أخرى.

س: هل استضافة Oxygen مجانية؟
ج: نعم بحسب إعلان Shopify، وهي مضمّنة مع خطط Shopify. ولم تعد إلزامية، فيمكنك استضافة الواجهة على Vercel أو غيرها.

س: هل أحتاج إلى ترحيل متجر هيدروجين القديم فوراً؟
ج: لا. تقول Shopify إن الواجهات الحالية تستمر في العمل، وتوفّر مهارة ترحيل لوكيل البرمجة عندما تقرر الانتقال.

الخلاصة

هيدروجين الجديد يزيل أكبر عائق أمام الواجهات المنفصلة: لم تعد مضطراً لإعادة بناء موقعك كي تستخدم Shopify. لكنه يبقى أداة للمواقع المخصصة والفرق التي تملك مطور JavaScript، لا بديلاً عن ثيم Liquid لمتجر صغير.

لو عندك عميل موقعه جاهز بـ Next.js وعايز يبيع، جرّب أمر setup على نسخة تجريبية الأول، وبعدها قرّر.

مراجع إضافية: Shopify and Vercel are rebuilding Hydrogen — Vercel، The honest 2026 Hydrogen assessment — Ask Phill

مرجع المقال (بالإنجليزية): Hydrogen 2026-10 is now available
المقال ده مش ترجمة حرفية: متكيّف للقارئ العربي ومضاف عليه سياق ووردبريس وElementor وJetEngine.