كيفية نشر تطبيق Next.js

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

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

في هذه المقالة، ستنشئ تطبيق Next.js وستتعلم كيف يمكنك استضافة هذا التطبيق ونشره باستخدام خدمة تهيئة الحاويات في Back4app.

الوجبات الرئيسية

• ستتعلم كيفية استخدام نموذج الحاوية كخدمة سحابية لنشر تطبيق الويب Next.js الخاص بك بسرعة وكفاءة.

• سوف تكتشف نقاط القوة في Next.js مثل العرض من جانب الخادم، والتقسيم التلقائي للأكواد، والتوجيه المدمج، وإنشاء الموقع الثابت الذي يعزز تجربة المستخدم.

• ستفهم القيود المحتملة لـ Next.js مثل منحنى التعلّم، والنظام البيئي المحدود، وتعقيد العرض من جانب الخادم، ومرونة التوجيه المحدودة.

ما هو Next.js؟

Next.js هو إطار عمل مفتوح المصدر ممتد فوق مكتبة React لإنشاء تطبيقات الويب. باستخدام Next.js، يمكنك بسهولة إنشاء تطبيقات React من جانب الخادم (SSR) وتطبيقات React التي تم إنشاؤها بشكل ثابت والتي تلبي احتياجاتك.

تم إنشاؤه بواسطة Vercel (المعروف سابقًا باسم Zeit) في عام 2016. في السنوات الأخيرة اكتسب Next.js شعبية كبيرة بسبب سهولة استخدامه وميزاته القوية.

مزايا Next.js

يوفر Next.js العديد من المزايا التي تجعله خيارًا شائعًا لتطوير الويب. تتضمن بعض هذه المزايا ما يلي:

العرض من جانب الخادم

يتيح إطار عمل Next.js إمكانية العرض من جانب الخادم لتطبيقات الويب الخاصة به. يسمح العرض من جانب الخادم بعرض الصفحات مسبقًا على الخادم قبل إرسالها إلى العميل بتنسيق HTML. يوفر تحسينًا أفضل لمحركات البحث (SEO).

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

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

التقسيم التلقائي للرموز

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

تؤدي خاصية التقسيم التلقائي للرموز في Next.js إلى سرعة تحميل الصفحات الأولية. كما أنها تقلل من كمية JavaScript المرسلة إلى العميل، مما يحسن الأداء وتجربة المستخدم.

توجيه مدمج

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

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

مسارات واجهة برمجة التطبيقات

تأتي تطبيقات Next.js مع مسارات API الافتراضية التي تسمح للمطورين بإنشاء نقاط نهاية لواجهة برمجة التطبيقات بدون خادم مباشرةً داخل تطبيقاتهم. تُعد مسارات واجهة برمجة التطبيقات ميزة قوية في Next.js توفر العديد من المزايا لبناء تطبيقات الويب.

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

يستخدم Next.js مسارات واجهة برمجة التطبيقات للتعامل بكفاءة مع طلبات واجهة برمجة التطبيقات، مما يسهّل إنشاء تطبيقات قابلة للتطوير والأداء وملائمة لتحسين محركات البحث.

إنشاء موقع ثابت

توليد الموقع الثابت هو ميزة رئيسية لإطار عمل Next.js. يستخدم Next.js خاصية إنشاء المواقع الثابتة لعرض الصفحات مسبقًا في وقت الإنشاء وتقديمها كملفات ثابتة. تضمن هذه الميزة أوقات تحميل سريعة للصفحات عن طريق العرض المسبق لكل صفحة في ملفات HTML.

تعتبر المواقع الثابتة ملائمة للغاية لتحسين محركات البحث، كما أنها تقلل من نواقل الهجوم، مما يجعلها أكثر أمانًا. المواقع الثابتة التي تم إنشاؤها بواسطة Next.js قابلة للتطوير بطبيعتها، حيث يمكنها التعامل مع أحمال حركة المرور العالية دون إجهاد البنية التحتية للخادم.

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

حدود Next.js

على الرغم من أن Next.js هو إطار عمل قوي وشائع لبناء تطبيقات React مُصَدَّرَة من جانب الخادم، إليك بعض القيود التي يجب أن تكون على دراية بها:

منحنى التعلم

يقدم Next.js مفاهيم واصطلاحات إضافية غير مألوفة في تطوير React التقليدي. قد يتطلب التحول إلى البناء باستخدام Next.js وقتًا لفهم بنيته وميزاته الخاصة والتكيف معها.

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

النظام البيئي المحدود

Next.js هو إطار عمل جديد نسبيًا مقارنةً بالأطر/المكتبات الراسخة مثل React و Angular. ونتيجة لذلك، لا يزال نظامه البيئي ينمو ولا يزال في مراحله الأولى. ليس لديه نفس النطاق الواسع من المكتبات والإضافات مثل الأطر الأكثر رسوخًا.

قد تحتاج إلى الاعتماد على الحزم المدعومة من المجتمع أو بناء حلول مخصصة لمتطلبات محددة.

تعقيد العرض من جانب الخادم

على الرغم من أن التقديم من جانب الخادم ميزة قوية في Next.js، إلا أنه يمكن أن يؤدي أيضًا إلى تعقيد عملية التطوير.

غالبًا ما يتطلب وقتًا أطول بكثير للتعلم والتنفيذ. يمكن أن يؤدي استخدام التقديم من جانب الخادم إلى حدوث أخطاء في عرض الخادم أو تناقضات بين عرض الخادم والعميل.

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

مرونة التوجيه المحدودة

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

قد يتطلب تخصيص سلوك التوجيه بما يتجاوز الاصطلاحات الافتراضية حلولاً إضافية، والتي لا تكون ملائمة دائمًا.

خيارات نشر Next.js

تتوفر خيارات نشر مختلفة لتطبيقات Next.js، بما في ذلك الحاويات كخدمة (CaaS) والبنية التحتية كخدمة (IaaS).

يجب أن تعرف ما هي هذه الخيارات، وكيف تعمل، وكيف تقارن بعضها ببعض لتناسب تطبيق Next.js الذي بنيته على أفضل وجه.

البنية التحتية كخدمة (IaaS)

IaaS هو نموذج حوسبة سحابية يوفر موارد حوسبة افتراضية عبر الإنترنت. عند استخدام IaaS، يمكن للمطورين نشر تطبيقاتهم وإدارتها على الأجهزة الافتراضية (VMs) التي يستضيفها موفر خدمة سحابية.

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

تتضمن بعض منصات IaaS الشائعة التي يمكنك استخدامها لنشر تطبيقات Next.js الخاصة بك ما يلي:

• Amazon Web Services (AWS) EC2
• Google Cloud Platform (GCP) Compute Engine
• Microsoft Azure Virtual Machines
• DigitalOcean

الحاوية كخدمة (CaaS)

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

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

عند نشر تطبيق Next.js كحاوية، يتم تجميع كود التطبيق ووقت التشغيل والتبعيات في صورة حاوية. يمكن بعد ذلك نشر هذه الصورة وتشغيلها على منصة CaaS.

تتضمن بعض منصات CaaS الشائعة التي يمكنك نشر تطبيقات Next.js عليها ما يلي:

• Back4App
• AWS Elastic Container Service (ECS)
• Google Kubernetes Engine (GKE)
• Azure Container Service (AKS)

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

بناء تطبيق Next.js ونشره على Back4App

سنناقش في هذا القسم ما يلزم لإنشاء تطبيق ويب باستخدام إطار عمل Next.js ونشر التطبيق على منصة Back4app باستخدام خدمة حاوية Back4app.

ستتعلم كل ما ستتعلمه عن كيفية التنقل في المنصة واستخدام خدمة الحاوية لجعل تطبيق الويب الخاص بك متاحًا من خلال خوادم Back4app. بعد قراءة هذا القسم ستتعلم كيفية نشر تطبيق Next.js.

ما هي حاويات Back4app Containers؟

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

حاويات Back4App هي ميزة قوية لمنصة Back4App توفر لك بيئة مرنة وقابلة للتطوير وآمنة لتشغيل تطبيقاتك.

تدعم هذه الحاويات لغات برمجة متعددة مثل PHP وPython وNode.js وغيرها. بعض المطورين بعضها منصة استضافة Next.js المجانية الرائعة .

يمكن توسيع نطاق حاويات Back4app تلقائيًا لتلبية متطلباتك. كل حاوية معزولة عن الحاويات الأخرى، مما يضمن حماية بيانات تطبيقك. تتكامل الحاويات بسهولة مع نظام Back4App البيئي.

وهذا يسهل عليك توصيل حاوياتك بخدمات Back4App الأخرى، مثل قواعد البيانات والوظائف السحابية.

مقدمة المشروع

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

يمكنك تخطي بناء تطبيق Next.js لنشر التطبيق على Back4app. ابحث عن الشيفرة المصدرية النهائية للتطبيق في مستودع GitHub هذا.

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

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

تأكد من أن لديك:

• فهم مفاهيم مكتبة React
• خبرة في Docker، بما في ذلك تثبيت Docker
• الإلمام ب Node.js و NPM
• تثبيت Git على حاسوبك وحساب GitHub.

ترميز تطبيق Next.js الخاص بك

لإنشاء سقالة لتطبيق Next.js، قم بتشغيل الأمر التالي في طرفية node.js:

npx create-next-app@latest

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

ستكون المطالبات مشابهة لقطة الشاشة الطرفية هذه.

يقوم Next.js بتهيئة تطبيقك لمطابقة إجاباتك السريعة. لن تحتاج إلى موجه التطبيقات و Tailwind CSS في هذا التطبيق. حدد لا لهذه الخيارات.

عندما يتم إنشاء التطبيق الخاص بك، ابدأ في إنشاء الواجهة.

أولاً، أضف الأنماط العامة التالية إلى ملف globals.css:

/* globals.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #151E3D;
  color: #8BACD9;
  inline-size: 60%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button{
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: aqua;
  color: #8BACD9;
  border: none;
}

button:hover{
  background-color: #151E3D;
  color: #8BACD9;
}

يمكنك العثور على ملف globals.css في مجلد الأنماط في دليل src. بعد إضافة الأنماط العامة، لتطبيقها على التطبيق الخاص بك، قم باستيراد ملف globals.css إلى ملف _app.tsx في دليل الصفحات.

قبل استيراد ملف globals.css في ملف _app.tsx، تحتاج أولاً إلى إنشاء مكون تخطيط لتحديد تخطيط تطبيقك.

للقيام بذلك، أنشئ مجلد مكوّن في دليل src وملف Layout.tsx داخل هذا المجلد. اكتب الشيفرة التالية في ملف Layout.t sx:

// Layout.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Comforter } from "next/font/google";

const comforter = Comforter({
  weight: ["400"],
  subsets: ["latin"],
});

function Layout(props: any) {
  return (
    <>
      <header className={styles.header}>
        <h1 className={comforter.className}>Advice Generator</h1>
      </header>
      {props.children}
    </>
  );
}

export default Layout;

تُعرِّف كتلة الشيفرة أعلاه مكون التخطيط. في مكون التخطيط، تستورد الأنماط الخاصة بك من ملف Home.module.css ودالة المعزي من الوحدة النمطية التالية/خط/غوغل.

باستخدام الدالة Comforter، يمكنك تهيئة خط comforter وتطبيقه على العنصر h1 في رأسك عن طريق تعيين خاصية className إلى comforter.className.

سيعمل تعبير props.children على تصيير المكونات التابعة داخل مكون التخطيط.

يجب عليك أيضًا تحديد نمط رأس الصفحة الرئيسية في ملف Home.module.css والأنماط الضرورية الأخرى.

على سبيل المثال:

/* Home.module.css */
.header{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-block-start: 15%;
  margin-block-end: 1rem;
  opacity: 0.6;
}

.card{
  inline-size: 100%;
  margin: auto;
  border-radius: 12px;
  background-color: aqua;
  padding: 4rem 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.card h3{
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.2rem; 
}

@media (max-width: 768px) {

  .header{
    margin-block-start: 30%;
  }

  .card{
      font-size: 12px;
      padding: 2rem;
  }

}

والآن، استورد ملف global.css ومُكوِّن التخطيط إلى ملف _app.tsx ولف تطبيقك في مُكوِّن التخطيط:

// _app.tsx
import Layout from "@/components/Layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

لقد حددت تخطيط تطبيقك. بعد ذلك، يمكنك جلب النصيحة من واجهة برمجة التطبيقات وعرضها في التطبيق. للقيام بذلك، ستستخدم ملف index.tsx في دليل الصفحات.

في ملف index.tsx، تجاوز الرمز الموجود بالرمز التالي:

// index.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ weight: ["100", "400"], subsets: ["latin"] });

export default function Home() {
  const [advice, setAdvice] = React.useState("");
  const [count, setCount] = React.useState(1);

  function handleClick() {
    setCount((prevState) => prevState + 1);
  }

  React.useEffect(() => {
    fetch("<https://api.adviceslip.com/advice>")
      .then((res) => res.json())
      .then((data) => setAdvice(data.slip.advice));
  }, [count]);

  return (
    <main>
      <div className={styles.card}>
        <h3 className={montserrat.className}>Advice No{count}</h3>
        <p className={montserrat.className}>{advice}</p>
        <button className={montserrat.className} onClick={handleClick}>
          generate
        </button>
      </div>
    </main>
  );
}

تُعرِّف كتلة الشيفرة الصفحة الرئيسية. يستورد مكتبة React، و Home.module.css للتصميم، وخط Google Montserrat من مكتبة الخطوط Next.js.

خطاف useEffect هو أداة قوية تسمح لك بتنفيذ التأثيرات الجانبية في مكونات React. في هذا التطبيق، لقد استخدمت خطاف useEffect لجلب النصيحة من واجهة برمجة التطبيقات الخاصة بك. ثم تُضبط النصيحة التي جلبتها من واجهة برمجة التطبيقات على حالة النصيحة.

سيُنفَّذ خطاف useEffect في البداية عند تصيير المكوّن ثم مرة أخرى عندما تتغير قيمة حالة العد. هذا لأنك عيّنت حالة العد كقيمة مصفوفة التبعية.

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

اكتمل تطبيق Next.js الخاص بك!

لبدء تشغيل التطبيق، قم بتشغيل الأمر التالي:

npm run dev

يجب أن يكون التطبيق قيد التشغيل على الخادم المحلي http://localhost:3000.

سيؤدي النقر على زر الإنشاء إلى جلب نصيحة جديدة وعرضها. سيزيد أيضًا “رقم النصيحة” بمقدار 1 في كل مرة.

إرساء التطبيق

قبل نشر تطبيق Next.js على تطبيق Back4app، يجب عليك إرساء التطبيق في Dockerize. سيؤدي إرساء التطبيق إلى حزم التطبيق وتوابعه في حاويات Docker.

توفر حاويات Docker طريقة خفيفة الوزن ومعزولة ومحمولة لتشغيل تطبيقاتك مع المكتبات والتكوينات اللازمة لها.

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

فيما يلي دليل تفصيلي خطوة بخطوة حول كيفية إرساء تطبيق Next.js الخاص بك:

الخطوة 1: إنشاء ملف Dockerfile في جذر مشروعك
قم بإنشاء ملف جديد باسم Dockerfile في الدليل الجذر لمشروع Next.js الخاص بك. سيحتوي هذا الملف على التعليمات الخاصة ب Docker لبناء صورة لتطبيقك.

الخطوة 2: تحديد ملف Dockerfile الخاص بك
في ملف Dockerfile، أدخل الشيفرة التالية:

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]

يقوم ملف Dockerfile هذا بما يلي:

• يبدأ من وقت تشغيل Node.js 14 الرسمي.
• يضبط دليل العمل على /التطبيق.
• نسخ package.json و package-lock.json إلى صورة Docker وتثبيت التبعيات.
• نسخ بقية شيفرة التطبيق إلى صورة Docker.
• يبني تطبيق Next.js.
• يعرض المنفذ 3000 للتطبيق.
• يحدد الأمر لبدء تشغيل التطبيق.

تصف هذه المواصفات البيئة التي سيعمل فيها تطبيقك.

الخطوة 3: إنشاء صورة Docker

قم بتشغيل الأمر التالي في جهازك الطرفي لإنشاء صورة Docker:

docker build -t advice-generator .

يمكنك استبدال “مُنشئ النصائح” بالاسم الذي تريد إعطاءه لصورة Docker الخاصة بك.

تشغيل حاوية Docker

بعد بناء الصورة، يمكنك تشغيلها كحاوية باستخدام الأمر التالي:

docker run -p 3000:3000 advice-generator 

يعيِّن هذا الأمر المنفذ 3000 في حاوية Docker إلى المنفذ 3000 على جهازك.

سيؤدي اتباع هذه الخطوات إلى تشغيل تطبيق Next.js الخاص بك في حاوية Docker. يمكنك الوصول إليها من خلال الانتقال إلى http://localhost:3000 في متصفح الويب الخاص بك.

دفع تطبيق Next.js الخاص بك إلى GitHub

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

git init
git add .
git remote add origin <your-repository-url> 
git commit -m 'initial commit'
git branch -M main
git push -u origin main

• git init: يقوم هذا الأمر بتهيئة مستودع Git جديد في الدليل الحالي.
• إضافة git: يضيف هذا الأمر جميع الملفات الموجودة في دليلك الحالي إلى منطقة الترحيل.
• git remote add origin : يربط هذا الأمر مستودعك المحلي بمستودع بعيد. استبدل بعنوان URL لمستودعك البعيد.
• git commit -m ‘التزام أولي’: يأخذ هذا الأمر جميع التغييرات المكتوبة في منطقة الترحيل ويخزنها في التزام جديد.
• فرع git -M الرئيسي: ينشئ هذا الأمر فرعًا جديدًا باسم main ويتحول إليه.
• git push -u origin main: يدفع هذا الأمر التزاماتك في فرعك الرئيسي إلى مستودع الأصل البعيد.

نشر التطبيق على Back4app

لنشر تطبيقك على Back4app، يجب عليك أولاً إنشاء حساب Back4app. للقيام بذلك، اتبع الخطوات التالية:

1. قم بزيارة موقع Back4app الإلكتروني.
2. انقر على زر “تسجيل”.
3. املأ نموذج التسجيل وأرسله.

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

بعد إنشاء حساب، قم بتسجيل الدخول إلى حسابك وانقر على “تطبيق جديد”

زر. يمكنك العثور على الزر في الزاوية العلوية اليمنى من الشاشة.

ستظهر لك شاشة مشابهة للشاشة المعروضة أدناه.

حدد خيار الحاوية كخدمة لإنشاء تطبيقك ونشره باستخدام الحاويات. يجب ألا يستغرق الإنشاء وقتاً طويلاً. بمجرد الانتهاء من ذلك، اربط حساب GitHub الخاص بك بتطبيق CaaS الذي تم إنشاؤه.

ثم حدد المستودع الذي تريد نشره من حساب GitHub المرتبط في تطبيق Back4app.

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

انقر على زر “إنشاء تطبيق” لنشر تطبيقك.

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

الخاتمة

Next.js هو إطار عمل مفتوح المصدر لبناء تطبيقات React المقدمة من جانب الخادم (SSR). كما أنه يوفر العديد من المزايا، بما في ذلك إنشاء موقع ثابت، وتقسيم الشيفرة تلقائيًا، والتوجيه المدمج، ومسارات واجهة برمجة التطبيقات، إلخ. هذه المزايا تجعل من Next.js إطار عمل قوي.

يعمل نشر تطبيق Next.js باستخدام CaaS من Back4pp على تبسيط عملية التطوير. منصة Back4app CaaS هي حل قابل للتطوير وآمن وفعال من حيث التكلفة لنشر تطبيقات Next.js.

واجهة سهلة الاستخدام، وتحديثات في الوقت الفعلي، ودعم واجهات برمجة تطبيقات GraphQL وREST، والنسخ الاحتياطية التلقائية، والبيئة الخالية من الخوادم، تجعل منه خياراً مثالياً للمطورين.

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