Next Js Commerce - نظرة عامة وإرشادات

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

Next Commerce هو أحدث عرض من BigCommerce بالتعاون مع فرق Next.js و Vercel. مع Next Commerce ، يمكن لمطوري التجارة الإلكترونية تثبيت تطبيق بدون رأس تمامًا مدمج مع BigCommerce في غضون دقائق. إنه أول مسعى من نوعه من Next و BigCommerce.

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

وفقًا لتقرير عن أداء الموقع ، في دراسة استقصائية شملت 120 مديرًا تنفيذيًا للتجارة الإلكترونية ، رأى 62 ٪ أن التجارة بدون رأس يمكن أن تحسن معدلات التحويل ومشاركة العملاء بشكل كبير.

يسعدنا أن نوضح لك مدى سهولة التثبيت وسهولة استخدام هذا العرض الأخير من BigCommerce و Next. هذا الدليل التفصيلي هو كل ما تحتاجه للبدء في التجارة التالية.

سنبدأ بنظرة عامة.

نظرة عامة على التجارة التالية

Next.js هو إطار عمل ويب مفتوح المصدر مستخدَم على نطاق واسع يمكنك من خلاله إنشاء تطبيقاتك الخاصة - كلاً من العرض من جانب الخادم والتطبيقات الثابتة باستخدام React. حاليًا ، يجلب إطار العمل التجارة Next.js إلينا. إنها مجموعة مطورين يمكننا من خلالها بناء مواقع تجارة إلكترونية عالية الأداء وقابلة للتخصيص والمشاركة. يتم تقديمه جنبًا إلى جنب مع منصة SaaS قوية ومفتوحة مثل BigCommerce ، فإن إمكانيات وإمكانيات Next Commerce هائلة.

لماذا يتجه السوق نحو تجارة إلكترونية بلا رأس؟

Next.js هي أداة قوية لبناء موقع التجارة الإلكترونية الخاص بك. إنها بنية كاملة وقوية يمكن تحجيمها وتخصيصها وتكوينها لتطبيقات التجارة الإلكترونية المختلفة.

على الرغم من أن Next.js يقدم عددًا من الفوائد ، فإليك بعضًا من المزايا القليلة المهمة:

• تقديم الخادم

  يمكن تقديم مكونات React من جانب الخادم قبل إرسال HTML إلى العملاء.

• إعادة تحميل الكود الساخن

  في كل مرة يكتشف Next.js تغييرات ، يتم إعادة تحميل الصفحة. يتم توجيه أي عنوان URL تلقائيًا إلى نظام الملفات. هذا لا يتطلب منك أي مهارات تكوين. ومع ذلك ، يمكنك دائمًا التخصيص وفقًا لاحتياجاتك.

• توافق النظام البيئي

  Next.js متوافق بشكل كبير مع React و Node وبالطبع JavaScript.

• تقسيم الكود تلقائيًا

  تأتي الصفحات مع المكتبات وجافا سكريبت فقط - لا شيء غير ذلك. بدلاً من إنشاء JavaScript واحد يحتوي على جميع أكواد التطبيق ، يقوم Next.js بالفعل بتقسيم التطبيق إلى موارد مختلفة مما يجعل العملية بأكملها أسهل.



• دعم TypeScript

  نظرًا لأن Next.js مكتوب بلغة TypeScript ، فإنه يوفر دعمًا كاملاً.

• الجلب المسبق

  يتم دعم خاصية الجلب المسبق بواسطة مكون Link الذي يقوم تلقائيًا بجلب موارد الصفحة - حتى تلك التي تقوم بالبصق التلقائي للتعليمات البرمجية.

• تطبيقات هجينة

  من الممكن الاستفادة من كل من SSR وتطبيقات الويب الثابتة في مشروع واحد باستخدام Next.js.

• لا يلزم التكوين

  يعد إطار العمل الجاهز للإنتاج هذا مثاليًا للفرق الهندسية التي تحاول توفير قابلية التوسع وسهولة الاستخدام لمتاجر التجارة الإلكترونية. يأتي مع التجميع التلقائي والتجميع ، ودعم CSS المدمج ، وتوجيه نظام الملفات ، وتقسيم الكود التلقائي وإنشاء API.

نظرة عامة حول كيفية النشر

الآن مجهزين بفهم أساسي لـ Next Commerce ، دعنا ندخل بسرعة في التفاصيل الأكثر إثارة - النشر. لنبدأ بالمتطلبات الأساسية. إن Next.js ليس شديد التشبث ، لذا فهو يأتي مع الحد الأدنى من المتطلبات.

المتطلبات الأساسية

• IDE
• TypeScript بدلاً من JavaScript
• معرفة أساسية لواجهات برمجة تطبيقات BigCommerce
• دليل للصفحات و / العامة. سيحتوي دليل / pages على _app.tsx و index.tsx
• سيحتوي دليل / public على وسائط يمكن تقديمها بشكل ثابت.
• بالإضافة إلى ذلك ، ستحتوي الصفحات / أيضًا على صفحات متجر التجارة الإلكترونية مع مساراتها.
• أي مزود Git - سواء كان Bitbucket أو GitHub أو GitLab.
• NPM

هذه هي المتطلبات الأساسية لوظيفة التجارة التالية. يمكنك دائمًا إعادة تنظيم بقية الدلائل لاحقًا.

الحزم والتكوين

بالإضافة إلى NPM و Yarn ، يستخدم تشغيل التجارة التالي ملفات .env و .config للبدء.

لكي يعمل التطبيق بشكل صحيح ، ستحتاج إلى الاستفادة من حزمة BigCommerce Storefront Data Hooks. يمكن إعادة استخدام الخطافات وفقًا لاحتياجات المكونات. يمكنك العثور على المكونات في دليل المكونات / ، ويتم عرضها على الصفحات. يحتاج الارتباط من الخطافات إلى المكونات والصفحات إلى كميات كبيرة من البيانات من واجهة المتجر. إذا كنت لا ترغب في إنفاق ثروة على تكاليف المطور ، فيمكنك بسهولة الاستفادة من حزمة BigCommerce Storefront Data Hooks لصالحك.

تساعدك هذه الحزمة في الوصول إلى الفئات وبيانات العملاء المهمة وصفحات المنتج والتفاصيل وغير ذلك الكثير. بمجرد تثبيت الحزمة بنجاح ، يمكنك ربط متغيرات .env الخاصة بك بزوج القيمة الرئيسية المناسب في واجهة متجر BigCommerce.

يتم تخزين ملفات .env تلقائيًا في Vercel. يمكنك بسهولة سحب ملف .env باستخدام الأمر "vercel env pull". يمكنك الآن تعيين مفاتيح واجهة برمجة تطبيقات واجهة المتجر BigCommerce ورمز GraphQL المميز باستخدام ملف env.local.

الخطوة التالية هي تكوين ملفات .config. يتيح لك tsconfig.json ترجمة JavaScript لمشروعك و next.config.js هو وحدة العقدة. يفوت العديد من المطورين هذا الأمر ، لكن يوصى به بشدة إذا كنت تتطلع إلى تحقيق أي وظيفة محددة.

تشغيل المشروع

يعد تشغيل المشروع في خادم بيئة التطوير أمرًا سهلاً للغاية. كل ما عليك فعله هو استخدام الأمر التالي:

yarn dev أو npm تشغيل dev

تعيين

يعد إنشاء Next.js Commerce أمرًا سهلاً للغاية - تفضل بزيارة nextjs.org/commerce وانقر على الزر Clone and Deploy. في النهاية ، يجب أن تكون قادرًا على تشغيل التطبيق الخاص بك على Vercel - باستخدام شعار متجرك. بمجرد النشر ، يمكنك تخصيص متجرك وفقًا لاحتياجاتك.

سنتخذ عملية الدمج خطوة واحدة في كل مرة.

الخطوة 1:

بمجرد الضغط على الزر Clone and Deploy ، يمكنك البدء في النشر باستخدام Vercel مع موفر Git.

إذا كان لديك حساب Vercel ، فيمكنك تسجيل الدخول باستخدام بيانات الاعتماد الخاصة بك.

إذا لم يكن لديك حساب Vercel ، فستتم مطالبتك بإنشاء حساب باستخدام أي من موفري Git الذين تختارهم.

الخطوة 2:

بعد تسجيل الدخول إلى حساب Vercel ، ستتمكن من رؤية مربع حوار Clone Git Repository مع قائمة منسدلة. حدد حساب Vercel الخاص بك واكتب اسم مشروعك في الحقل المتاح واضغط على متابعة.

الخطوه 3:

الخطوة التالية هي تثبيت عمليات الدمج. لتوصيل متجر BigCommerce الخاص بك بمشروع Vercel الخاص بك ، اضغط على زر التثبيت. بمجرد الضغط على زر التثبيت ، يجب أن ترى إضافة BigCommerce إلى شاشة مشروع Vercel الخاص بك.

الخطوة الرابعة:

إذا كان لديك بالفعل متجر BigCommerce ، يمكنك ببساطة تسجيل الدخول باستخدام بيانات الاعتماد الحالية لدمج Vercel و BigCommerce. ومع ذلك ، إذا كنت جديدًا في BigCommerce ، فانقر فوق تسجيل.

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

الخطوة الخامسة:

يمكنك الآن إنشاء مستودع Git عن طريق كتابة اسم المستودع الخاص بك. انقر فوق متابعة.

الخطوة السادسة:

بمجرد وصولك إلى شاشة استيراد المشروع ، يجب أن تكون قادرًا على تأكيد إعدادات المشروع والنقر فوق نشر. يجب ألا يستغرق النشر بالكامل أكثر من بضع دقائق.

بمجرد الانتهاء من النشر إلى Vercel ، ستتمكن من رؤية صورة مصغرة لموقعك المنشور.

تهانينا ، لقد تم نشر مشروعك بنجاح!

رد + Next.js

يمكنك إعداد متجر التجارة الإلكترونية الخاص بك باستخدام Next - SSR generator لـ React - ثم نشره في Vercel. باستخدام Crystallize و Next.js Boilerplate ، يمكنك بسهولة إنشاء واجهة متجر إلكترونية لتطوير الويب من Jamstack. الآن ، سنستخدم Crystallize CLI لتطوير مشروع جديد.

أدخل الأمر التالي في جهازك الطرفي.

npx @ crystallize / cli

باستخدام هذا الأمر ، ستتمكن من إضافة النموذج المعياري المفضل لديك ، أو اختيار الذهاب مع المستأجر الخاص بك ، أو اختيار مستأجر تجريبي وإضافة Service API.

من أجل النشر في Vercel ، ستحتاج إلى تثبيت هذه المتطلبات الأساسية على جهاز الكمبيوتر الخاص بك.

• فيرسيل CLI
• مزود Git
• على الأقل ، الإصدار 10 Node.js
• المستأجر بالتسجيل في Crystallize

قم بتشغيل المشروع في خادم التطوير باستخدام:

yarn dev أو npm تشغيل dev

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

بمجرد الانتهاء من إنشاء صفحات لأشكال عناصر مختلفة ، يمكنك البدء في النشر إلى Vercel.

مرة أخرى ، لنشر مشروعك في Vercel ، ستحتاج إلى اجتياز تكامل Vercel Github. ومع ذلك ، يمكنك أيضًا النشر يدويًا بنفس السهولة. استخدم سطر الأوامر لكتابة - تسجيل الدخول vercel - اضبط متغيري البيئة باستخدام لوحة معلومات Vercel.

يحتاج نشر مشروعك مع Vercel إلى موفر Git. ادفع مشروعك إلى موفر Git وأنت على وشك الانتهاء - سيبدأ النشر.

تغليف

لقد حان عصر التجارة الإلكترونية مقطوعة الرأس. يركز تطوير مواقع التجارة الإلكترونية التقليدية على تقديم تجربة متكاملة مع واجهة أمامية وخلفية متماسكة جيدًا. ساعد هذا المتاجر على إطلاق تطبيقاتها بسرعة. ومع ذلك ، سرعان ما ستواجه مشكلات في الأداء - والأهم من ذلك أنك لن تكون قادرًا على التوسع بالقدر الذي تريده. ولكن مع التجارة الإلكترونية بدون رأس ، ليس عليك أن تكافح كثيرًا.

يمنحك التصميم بدون رأس حرية كبيرة في تصميم الواجهة الأمامية الخاصة بك من البداية أو استخدام واجهة مسبقة الصنع. سيكون لديك القدرة على الاستجابة بسرعة للتغيرات في السوق وتخصيص تجارب العملاء وفقًا لذلك. الأهم من ذلك كله - يمكنك إجراء تغييرات على الواجهة الأمامية دون العبث بالواجهة الخلفية. الآن أنت تعرف لماذا ، كمطورين ، نحن على يقين من أن مستقبل التجارة الإلكترونية بلا رأس بالتأكيد.