ما هو Next.js؟ دليل بسيط لمُنشئي التطبيقات

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

لماذا يهم Next.js عند البناء بالذكاء الاصطناعي

حين تصف تطبيقًا لمُنشئ بالذكاء الاصطناعي، يجب أن يختار أساسًا تقنيًا له. وهذا الاختيار يؤثر في أشياء تهمك لاحقًا:

• الظهور في البحث. الموقع العام الذي يحتاج أن يظهر في نتائج Google يستفيد من إرسال HTML حقيقي، وهذا ما يجيده Next.js.
• مكان الخلفية. يتيح Next.js أن تعيش صفحات الواجهة وكود الخادم (مثل «احفظ هذا النموذج» أو «استدعِ واجهة الدفع») في مشروع واحد.
• الاستضافة. تطبيق Next.js مع ميزات خادمية يحتاج خادمًا يعمل عليه، بينما يمكن تقديم تطبيق Vite العادي كملفات ثابتة.

يبدأ Mythex المشاريع الجديدة افتراضيًا بـ Vite + React + TypeScript + Tailwind، ويستخدم Next.js حين تطلبه، فيكفي أن تكتب «استخدم Next.js» في طلبك الأول (كيف تُختار التقنية). لذا من المفيد أن تعرف متى يستحق طلبه.

تشبيه يومي

إذا كان React صندوقًا من قطع ليغو عالية الجودة، فإن Next.js طقم ليغو يحتوي التعليمات والقاعدة وقطع الأبواب والأنابيب جاهزة.

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

ما الذي يضيفه Next.js إلى React

يقدم Next.js طريقتين لتنظيم الصفحات. App Router (مجلد app/) هو الأحدث ويدعم مكونات الخادم. وPages Router (مجلد pages/) هو الأصلي، وما زال مدعومًا. والمشاريع الجديدة تستخدم App Router عادةً. وإذا بدا لك كود مُنشئ الذكاء الاصطناعي أو أي درس تعليمي غريبًا، فغالبًا لهذا السبب.

مثال عملي: دليل عام لمقاهي المدينة

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

قد تبدو صفحة Next.js لمقهى واحد تقريبًا هكذا:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

ما الذي يحدث حين يزور شخص (أو Google) الرابط /cafes/blue-door:

1. يطابق Next.js الرابط مع ذلك الملف. مجلد [slug] يعني «أي مقهى».
2. يعمل المكون على الخادم، ويقرأ المقهى من قاعدة البيانات ويبني HTML.
3. يستلم المتصفح صفحة كاملة فيها اسم المقهى وعنوانه جاهزين، دون انتظار JavaScript لجلب البيانات.

أما مع تطبيق React عادي من جهة العميل، فسيستلم المتصفح أولًا صفحة شبه فارغة، ثم يحمّل JavaScript، ثم يجلب المقهى، ثم يعرضه. قد تتعامل محركات البحث مع ذلك، لكن الصفحة الكاملة أكثر موثوقية. انظر تحسين محركات البحث لمواقع بُنيت بالذكاء الاصطناعي.

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

مصطلحات أساسية

مفاهيم خاطئة شائعة

• «Next.js يحل محل React». لا. إنه يستخدم React. ومكوناتك ما زالت مكونات React.
• «Next.js هو الخيار الأفضل دائمًا». إنه أقدر، لكنه يحتاج فهمًا أكبر. العرض على الخادم والتخزين المؤقت والفرق بين كود الخادم وكود العميل مصادر شائعة لأخطاء محيرة. أما تطبيق يكون معظمه خلف تسجيل دخول، فغالبًا ما يكون تطبيق React عاديًا أبسط.
• «Next.js يعمل على Vercel فقط». إنه مفتوح المصدر ويمكن تشغيله على أي خادم Node.js أو داخل حاوية Docker. والتصدير الثابت الكامل ممكن إذا لم تستخدم ميزات الخادم.
• «استخدام Next.js يضمن تحسين SEO جيدًا». يجعل الصفحات القابلة للقراءة أسهل. أما الترتيب فما زال يعتمد على العناوين والمحتوى والسرعة والروابط.
• «كود الخادم في Next.js خاص تلقائيًا». الكود الموجه للعميل ينتهي في المتصفح. والأسرار يجب أن تبقى في كود الخادم فقط ومتغيرات البيئة.

ماذا تسأل مُنشئ التطبيقات بالذكاء الاصطناعي

• «استخدم Next.js مع App Router» — في طلبك الأول، إذا كنت تريده.
• «أي الصفحات تُعرض على الخادم، وأيها ثابتة، وأيها يعمل في المتصفح؟ ولماذا؟»
• «اجعل صفحات التسويق والقوائم العامة معروضة على الخادم أو ثابتة، مع عناوين وأوصاف مناسبة.»
• «أبقِ مفاتيح واجهات البرمجة في كود الخادم وفي متغيرات البيئة فقط. أرني أين يُقرأ كل مفتاح.»
• «هل يحتاج هذا التطبيق إلى Next.js، أم أن Vite + React أبسط لما نبنيه؟»

Next.js في Mythex

يستخدم Mythex افتراضيًا Vite + React + TypeScript + Tailwind، ويتحول إلى Next.js حين تطلبه في طلبك؛ وذكر ذلك منذ البداية يوفّر رصيدًا مقارنة بتغييره لاحقًا. ترى التطبيق في المعاينة الحية، وينشره زر Publish على رابط مباشر دون أن تعد الاستضافة بنفسك. وتنبه وثائق Mythex إلى أن تطبيقات الصفحة الواحدة المعروضة من جهة العميل أضعف في SEO من صفحات HTML المعروضة على الخادم أو الثابتة، لذا إذا كان البحث يهمك في موقع تسويقي، فاذكر ذلك صراحةً منذ البداية (تحسين SEO لتطبيقك).

الأسئلة