المحتويات
قل لـ Claude Code أو ChatGPT "أريد بناء تطبيق ويب" وستسمع على الأرجح: "لنستخدم Next.js." بالنسبة للمطوّر المتمرّس هذا اقتراح طبيعي، أما المبتدئ فيتساءل فورًا: "ما هو Next.js؟ وما الفرق بينه وبين React؟ وهل أحتاجه فعلًا؟"
الخلاصة: في أول مشروع أو مشروعين للمبتدئ، يكون Next.js "مريحًا" لا "ضروريًا". إذا كان الهدف أن يعمل شيء ما، فغالبًا يكفي خيار أخف (HTML ثابت، Astro، Vite + React). وفي الوقت نفسه، توصي وثائق React الرسمية ببدء التطبيقات الجديدة بإطار عمل وتضع Next.js في المقدمة. تتحقق هذه المقالة من الجانبين في وثائق React وNext.js الرسمية (بتاريخ 1 أكتوبر 2026) وترتّب الحد الفاصل بين استخدامه وعدمه.
مهمة هذه المقالة هي القرار عندما يوصي الذكاء الاصطناعي بـ Next.js. أما طريقة عمل Next.js (أنماط العرض، App Router، التغييرات بين الإصدارات) ففي ما هو Next.js؟، وقرار استضافته على Vercel في عندما يقول الذكاء الاصطناعي "استخدم Vercel".
حتى لو أوصى به الذكاء الاصطناعي، قد لا يحتاجه مشروعك الأول
— ثلاث نقاط وصول بحسب حجم ما تريد بناءه
غالبًا ما يقترح الذكاء الاصطناعي أولًا التركيبة المألوفة "Next.js + Vercel + Tailwind".
حكم واحد منك على حجم المشروع يغيّر مقدار ما عليك تعلّمه.
1. لماذا يوصي الذكاء الاصطناعي بـ Next.js؟ 3 أسباب
لأدوات الذكاء الاصطناعي أسباب حقيقية لاقتراح Next.js، ونلخّصها في ثلاث نقاط.
3 أسباب لتوصية الذكاء الاصطناعي بـ Next.js
السبب 1: الوثائق الرسمية توصي به
تقول صفحة React الرسمية "Creating a React App" إنه لبناء تطبيق أو موقع جديد بـ React يُنصح بالبدء بإطار عمل، وتذكر Next.js (App Router) أولًا. كما أن الشيفرات والدروس المنشورة مليئة بأمثلة Next.js. لذلك فإن التوصية بـ Next.js بالنسبة للذكاء الاصطناعي جواب يصعب أن يخطئ، لكنها ليست حكمًا على أنه الأفضل لاستخدامك أنت.
السبب 2: كل ما تحتاجه مدمج
مع React وحده (مثل Vite + React) تحتاج مكتبات منفصلة من أجل التوجيه والعرض على الخادم وتحسين الصور وواجهات API. أما Next.js فيوفّرها في إطار عمل واحد. من المنطقي أن يستنتج الذكاء الاصطناعي أن "الشرح أقل" و"الشيفرة أقل".
السبب 3: طريق قصير إلى النشر
شركة Vercel هي من تطوّر Next.js وتصونه، كما تذكر وثائق React. وتقوم Vercel بنشر الموقع مع كل push عبر التكامل مع GitHub، فلا يكاد يوجد احتكاك بين كتابة الشيفرة وإطلاقها. لكن لخطة Vercel المجانية شروطًا، منها أنها للاستخدام غير التجاري فقط. التفاصيل في عندما يقول الذكاء الاصطناعي "استخدم Vercel".
2. ما هو Next.js؟ بالقدر اللازم للقرار
لنرتّب المصطلحات. ثلاثة منها يسهل الخلط بينها:
- JavaScript: لغة البرمجة الأساسية التي تعمل في المتصفح
- React: مكتبة واجهات أنشأتها Meta (فيسبوك سابقًا) لبناء الشاشات من مكوّنات
- Next.js: إطار عمل فوق React تطوّره Vercel، يجمع الآليات التي يحتاجها كل تطبيق ويب: التوجيه والعرض على الخادم والتحسين وغيرها
تشبيه من البناء: JavaScript = الخشب، وReact = المطرقة والمنشار، وNext.js = طقم منزل هيكله (الأساس والأعمدة وإطار السقف) مركّب مسبقًا. تضيف التشطيب والأثاث فتسكن، لكن عليك اتباع قواعد الطقم.
حتى 1 أكتوبر 2026 أحدث إصدار هو Next.js 16.3 (صدر في 3 أغسطس 2026). وما يهم القرار أكثر من رقم الإصدار هو وتيرة التحديثات. فمنذ يوليو 2026 صار Next.js يصدر إصلاحات أمنية شهرية يُعلن عنها مسبقًا، وفي سبتمبر 2026 أصدر إصلاحات جعل فيها سلسلة 16.3 "Active LTS" وسلسلة 15.5 "Maintenance LTS" (مدونة Next.js). إن استخدمته فاحسب حساب متابعة هذه التحديثات. أما الشرح المفصّل لطريقة عمله (SSR وSSG وISR وApp Router والتغييرات بين الإصدارات) ففي ما هو Next.js؟
3. هل تحتاج Next.js الآن؟ أين يقع الحد الفاصل
ضيّق سؤال هل تحتاج Next.js بخمسة أسئلة. بعدها تأتي حالات الملاءمة وعدمها كما تذكرها الوثائق الرسمية، ثم جدول الحد الفاصل.
5 أسئلة: هل تحتاج Next.js؟
إذا أشار سؤالان أو أكثر من س1 إلى س3 إلى Next.js فهو مناسب.
وإن لم يشر أيٌّ منها تقريبًا، فالأجدر النظر في خيار أخف.
الملاءمة وعدمها وفق الوثائق الرسمية (بتاريخ 1 أكتوبر 2026)
لا تحتوي وثائق Next.js على قائمة "بالحالات التي لا يناسبها". بدلًا من ذلك، يوفّر دليل React عن طريقة البدء ودليل Next.js عمّا يعمل وأين مادة القرار.
| المصدر | ما يقوله النص الأصلي | معناه بالنسبة لقرارك |
|---|---|---|
| صفحة React "Creating a React App" | توصي ببدء التطبيقات الجديدة بإطار عمل، وتذكر Next.js (App Router) وReact Router (v7) وExpo (للتطبيقات الأصلية) | لتطبيقات الويب، Next.js أحد المرشحين الموصى بهم رسميًا، وليس الوحيد |
| الصفحة نفسها، قسم "Start From Scratch" | إذا كانت لتطبيقك قيود لا تلبّيها الأطر جيدًا، أو أردت بناء إطارك الخاص، أو أردت تعلّم أساسيات React، فيمكنك البدء من الصفر (وتختار التوجيه وجلب البيانات بنفسك) | البدء بـ React وحده عبر Vite بغرض التعلّم يتوافق مع التوجيه الرسمي |
| صفحة Next.js "Deploying" | خادم Node.js وDocker يدعمان كل الميزات، والتصدير الثابت محدود، وتكاملات المنصات الخاصة "قد تختلف" في الميزات والتوافق | الميزات المتاحة تتوقف على مكان الاستضافة. كل الميزات تعمل دون Vercel |
| صفحة Next.js "Static Exports" | مع التصدير الثابت لا تُدعم ملفات تعريف الارتباط، وإعدادات rewrites وredirects وheaders، وISR (إعادة التوليد الدورية)، وRoute Handlers المعتمدة على الطلب | إن أردت وضعه على استضافة لا تقدّم إلا الملفات الثابتة فصمّم دون هذه الميزات أو اختر خيارًا آخر |
| مدونة Next.js | منذ يوليو 2026 إصدارات أمنية شهرية يُعلن عنها مسبقًا. وحتى سبتمبر 2026 سلسلة 16.3 هي Active LTS وسلسلة 15.5 هي Maintenance LTS | إذا كان يعمل على خادم، فـمواصلة تطبيق التحديثات جزء من الالتزام |
أين يقع الحد الفاصل: اختيار Next.js أو عدمه
بجمع المصادر الأصلية والأسئلة الخمسة، تبدو الحدود الفاصلة هكذا (اقرأ ما تقوله المصادر الرسمية منفصلًا عن تلخيص هذه المقالة).
| الشرط | اختر Next.js | لا تختره (البدائل) |
|---|---|---|
| ما تبنيه | تطبيق ويب يمزج صفحات عامة مع شاشات بعد تسجيل الدخول وواجهات API | موقع يعرض المقالات فقط (Astro وHugo وWordPress) |
| زيارات البحث | صفحات كثيرة تريدها في نتائج البحث | شاشات بعد تسجيل الدخول فقط (SPA عبر Vite + React) |
| مرحلة التعلّم | تعرف أساسيات React (المكوّنات وprops وstate) | React جديد عليك (وثائق React تعرض أيضًا مسار البدء من الصفر) |
| الاستضافة | يتوفر Node.js أو Docker، أو منصة PaaS داعمة مثل Vercel | لا يمكن استضافة إلا ملفات ثابتة؛ وإن احتجت ميزات الخادم فبنية أخرى |
| التشغيل | تستطيع تطبيق التحديثات الأمنية كل شهر | لا طاقة لديك لمتابعتها (المواقع الثابتة أقل عرضة للخطر) |
| ما لديك مسبقًا | مشروع جديد | Laravel أو Rails أو Django يعمل بالفعل |
4. البدء دون Next.js: 4 بدائل رئيسية
حين يتضح أنه "ليس بالضرورة Next.js"، توجد أربعة بدائل واقعية بحسب الاستخدام.
| الخيار | لمن | نقاط القوة | نقاط الضعف |
|---|---|---|---|
| Astro | المدونات ومعارض الأعمال وصفحات الهبوط | يُخرج الصفحات بصيغة HTML ويضيف JavaScript فقط حيث يلزم التفاعل. يمكن مزج مكوّنات React وVue وSvelte | لا يناسب التطبيقات الديناميكية المبنية حول تسجيل الدخول |
| Vite + React | تطبيقات SPA والأدوات الداخلية وتطبيقات المهام | إعداد قليل ويعمل فورًا. تركيز على أساسيات React | الصفحات التي تريدها في البحث تحتاج حلًا منفصلًا على الخادم |
| SvelteKit | تريد العرض على الخادم دون أن يكون React بالضرورة | صياغة قريبة من HTML، والعرض على الخادم مدمج | ما تعلّمته في React لا ينتقل مباشرة |
| HTML + Vanilla JS | المواقع الصغيرة حقًا | بلا اعتماديات؛ تنشر برفع ملفات ثابتة | تصعب إدارته حين يكبر |
إرشادات عملية:
- مدونة شخصية أو موقع مقالات ← Astro. موقع AI Arte نفسه يعمل بـ Laravel، لكن لمدونة ثابتة جديدة يستحق Astro التجربة أولًا
- تطبيق مهام أو آلة حاسبة أو SPA داخلية ← Vite + React. ومناسب أيضًا لتعلّم أساسيات React
- "لا أريد React" ← SvelteKit. قوالبه قريبة من HTML
- صفحة هبوط واحدة ← HTML وCSS. دون إطار عمل
5. إن استخدمته: 5 أساسيات يجب معرفتها
إذا قرّرت اعتماد Next.js، فـهذه الأساسيات الخمس هي الحد الأدنى.
الأساس 1: App Router مقابل Pages Router
في Next.js يتعايش نهج جديد (App Router) ونهج قديم (Pages Router). ابدأ المشاريع الجديدة بـ App Router (فالوثائق الرسمية تتمحور حوله). كثير من الدروس القديمة تفترض Pages Router، فاعتد على التحقق: "هل هذا لـ App Router؟".
الأساس 2: Server Components وClient Components
هذه الفكرة المحورية في App Router. المكوّنات افتراضيًا Server Components (تُعرض على الخادم). والأجزاء التي تحتاج تفاعلًا مثل النقر تصبح Client Components بكتابة 'use client' في أول الملف. تذكّر قاعدة "جلب البيانات على الخادم، والتفاعل على العميل" لتتجنب معظم الارتباك الأولي.
الأساس 3: أسماء الملفات هي المسارات
app/about/page.tsx ← /about، وapp/blog/[slug]/page.tsx ← /blog/أي-نص. بنية المجلدات هي نفسها عنوان URL. وهي طريقة تفكير مختلفة عن React Router وأمثاله، فقد تربكك في البداية.
الأساس 4: أين توضع متغيرات البيئة
ضع مفاتيح API وما يشبهها في .env.local. أضف البادئة NEXT_PUBLIC_ فقط للقيم التي يجوز إرسالها إلى المتصفح، ولا تضفها لقيم الخادم. الخطأ في ذلك وكشف قيمة سرية في المتصفح حادث كلاسيكي عند المبتدئين.
الأساس 5: الاستضافة خارج Vercel
بحسب صفحة Next.js الرسمية "Deploying"، يشغّل خادم Node.js (next start) وDocker كل الميزات، أما التصدير الثابت فبعضها فقط. وتستخدم Cloudflare وNetlify وغيرهما تكاملات خاصة تقول الوثائق إنها "قد تختلف" في الميزات والتوافق (وتعمل Cloudflare وNetlify على محوّلات موثّقة). كل الميزات تعمل على خادمك الخاص أيضًا، لكنك تتحمّل التحديثات والمراقبة. شروط Vercel في عندما يقول الذكاء الاصطناعي "استخدم Vercel".
6. 3 فخاخ يقع فيها المبتدئون
الفخ 1: "جعل كل شيء use client"
إضافة 'use client' مع كل خطأ تمحو معظم فائدة العرض على الخادم، وحينها يكون Vite + React أبسط. تذكّر "العميل بالحد الأدنى، والخادم هو الأصل".
الفخ 2: معرفة شروط الاستضافة متأخرًا
قصة معتادة: تبدأ بخطة Vercel المجانية لأن الذكاء الاصطناعي قال ذلك، ثم تكتشف لاحقًا أن "وضع الإعلانات يجعل الاستخدام تجاريًا، فلم تعد الخطة المجانية صالحة". خطة Hobby في Vercel مقصورة على الاستخدام الشخصي غير التجاري، وخطة Pro تبدأ من 20 دولارًا شهريًا والزيادة تُحتسب حسب الاستخدام (وثائق Vercel، بتاريخ 1 أكتوبر 2026). ويحدث العكس أيضًا: تحاول رفع التطبيق إلى استضافة لا تقدّم إلا الملفات الثابتة، ثم تكتشف أن إعادة التوجيه وISR لا تعملان. حدّد مكان الاستضافة قبل أن تبدأ، وصمّم بما يعمل هناك فقط.
الفخ 3: الذكاء الاصطناعي يكتب بصياغة Pages Router القديمة
لأن بيانات التدريب مليئة بالشيفرات القديمة، قد يعيد الذكاء الاصطناعي شيفرة تستخدم getStaticProps بأسلوب Pages Router أو مجلد pages/. يكفي أن تطلب صراحة "اكتبها لـ App Router" لترتفع الدقة. راجع أيضًا نصائح كتابة الأوامر.
next من ملف package.json وأضف سطرًا مثل "App Router وTypeScript"، فتقلّ الشيفرة المتعارضة مع مشروعك. كما أضاف Next.js 16.3 طريقة تتيح لوكلاء البرمجة قراءة الوثائق المطابقة لإصدار مشروعك دون أي إعداد (Next.js 16.3).
الخلاصة
أهم ما في المقالة:
- لماذا يوصي الذكاء الاصطناعي بـ Next.js: الوثائق الرسمية توصي به / كل شيء مدمج / طريق قصير إلى النشر — كلها صحيحة، لكنها ليست "الأفضل لك"
- توصي وثائق React ببدء التطبيقات الجديدة بإطار عمل، وتعرض في الوقت نفسه مسار البدء من الصفر لتعلّم الأساسيات
- قرّر بخمسة أسئلة (ماذا تبني، زيارات البحث، تسجيل الدخول وقاعدة البيانات، أساسيات React، الاستضافة) وجدول الحد الفاصل
- يعمل Next.js بكل ميزاته على خادم Node.js أو في Docker، والتصدير الثابت ببعضها فقط. Vercel ليس شرطًا
- إن استخدمته فاحسب حساب تطبيق الإصلاحات الأمنية الشهرية (منذ يوليو 2026)
- ثلاثة فخاخ: كل شيء use client / معرفة شروط الاستضافة متأخرًا / الذكاء الاصطناعي يكتب Pages Router القديم
حين يقول الذكاء الاصطناعي "لنستخدم Next.js"، فإن التوقف للتساؤل عمّا إذا كنت تحتاجه فعلًا قبل الموافقة هو أول خطوة احترافية. Next.js أداة قوية، لكن مشروعك الأول قد لا يحتاجها.
الأسئلة الشائعة
نعم. يقوم Next.js على React، فالأساسيات (المكوّنات وprops وstate) لا غنى عنها. اتباع الترتيب "صفحات التعلّم الرسمية في React ← تطبيق SPA بسيط عبر Vite ← ثم Next.js" يساعدك على التمييز بين ما يخص React وما يخص Next.js.
الاسمان متشابهان لكنهما شيئان مختلفان. React Native لبناء تطبيقات الجوال (iOS وAndroid)، وNext.js إطار عمل لتطبيقات الويب. إن أردت تطبيق جوال فانظر إلى Expo الذي تذكره وثائق React للتطبيقات الأصلية.
نعم، لكن لكل مزوّد شروطه. الخطة المجانية في Cloudflare Pages تسمح بـ 500 عملية بناء شهريًا (الحدود الرسمية)، وخطة Netlify المجانية فيها 300 رصيد شهريًا وتتوقف عند بلوغ الحد (للحسابات المنشأة منذ سبتمبر 2025). ويمكن نشر التصدير الثابت في أي مكان يقدّم ملفات ثابتة. شروط الخطط المجانية لكل مزوّد مجموعة في ما هي PaaS (مثل Vercel)؟
الخادم هو الأصل، والعميل للتفاعل فقط. كل ما يستخدم useState أو useEffect أو onClick وأمثالها يحتاج 'use client'. وجلب البيانات (fetch والوصول إلى قاعدة البيانات) يكون على الخادم. عند الشك اكتبه أولًا كـ Server Component وافصل كـ Client ما يسبّب الخطأ فقط.
نعم، إنها السلسلة نفسها. الأدوات التي يوصي بها الذكاء الاصطناعي بوصفها "معيارًا" (Docker وNext.js وTypeScript وغيرها) يُوصى بها لأنها شائعة الاستخدام، لا لأنها بالضرورة الأفضل لك. يميل المبتدئ إلى الظن بأن "ما يوصي به الذكاء الاصطناعي أحتاجه"، وفكرة هذه المقالة هي إضافة حكمك الخاص على الحجم والهدف ومرحلة التعلّم.
