ما هو Next.js وماذا يضيف على React؟

Question

Accepted Answer

**Next.js** هو **framework** React متكامل. React بحد ذاته مجرد مكتبة واجهة مستخدم — فهو يرسم المكونات لكنه يترك التوجيه والجلب البيانات وتقديم الخوادم والأدوات البناء لك. Next.js يوفر كل ذلك جاهزاً، بالإضافة إلى runtime الخادم. ## ما تترك React وحدها (و Next.js يضيفه) ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## مثال واقعي: المسار مجرد ملف ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` في React العادي ستثبت موجهاً، تعد المسارات، وتعد البناء. في Next.js، إنشاء الملف *هو* المسار. ## لماذا تختاره الفريق - **SEO والأداء** — HTML المعروض على الخادم يعني أن المحتوى موجود في الاستجابة الأولية (جيد للزحافات والطلاء الأول السريع)، بخلاف تطبيق React SPA من جهة العميل فقط الذي يشحن صفحة فارغة ثم يرطب. - **متكامل في مشروع واحد** — الواجهة الأمامية والخلفية (مسارات API، Server Actions) تعيش معاً. - **افتراضيات جاهزة للإنتاج** — تقسيم الأكواد التلقائي، تحسين الصور/الخطوط، التخزين المؤقت. ## لماذا يهم Next.js هو framework React الأكثر شهرة لأنه يحول React من مكتبة واجهة مستخدم إلى منصة تطبيق كاملة — معالجة استراتيجية العرض والتوجيه والبيانات والخادم حتى تركز على الميزات بدلاً من السباكة. هو الاختيار الافتراضي عندما تحتاج SEO أو أداء أو منطق من جهة الخادم مع React.