ما هو Next.js؟
Next.js إطار عمل مبني على React، طوّرته شركة Vercel، لبناء مواقع وتطبيقات سريعة ومُحسّنة لمحرّكات البحث (SEO) بسهولة.
React مكتبة لبناء الواجهات، و Next.js يضيف فوقها كل ما تحتاجه لموقع كامل: التوجيه، التصيير على الخادم، وتحسين الأداء.
لماذا Next.js؟
- SEO ممتاز: يصيّر الصفحات على الخادم فتظهر لمحرّكات البحث.
- سرعة فائقة: تحسينات تلقائية للصور والخطوط والأكواد.
- توجيه جاهز: بنية ملفات بسيطة بدل إعداد يدوي.
- هذا الموقع (The Code Fix) نفسه مبني بـ Next.js!
أين يُستخدم Next.js؟
- المواقع التسويقية والمدوّنات: حيث السرعة و SEO أولوية.
- المتاجر الإلكترونية: صفحات سريعة تظهر جيدًا في جوجل.
- لوحات التحكّم والتطبيقات: واجهات تفاعلية مع بيانات من الخادم.
CSR مقابل SSR
| الطريقة | متى تُرسم الصفحة | الأثر على SEO |
|---|---|---|
| CSR (React وحده) | في المتصفّح | ضعيف |
| SSR/SSG (Next.js) | على الخادم/وقت البناء | ممتاز |
هذا الفرق هو السبب الأساسي لاختيار Next.js عندما يهمّك ظهور موقعك في نتائج البحث.
إنشاء مشروع
npx create-next-app@latest my-app
cd my-app
npm run dev
بنية المشروع (App Router)
app/
page.tsx # الصفحة الرئيسية (/)
layout.tsx # القالب العام
about/page.tsx # صفحة /about
كل مجلّد داخل app/ يصبح مسارًا، وكل page.tsx يصبح صفحة — بلا إعداد توجيه
يدوي.
أسئلة شائعة
هل أتعلّم React قبل Next.js؟ نعم، Next.js مبني على React، فإتقان المكوّنات و JSX شرط أساسي قبل البدء.
ما الفرق بين Next.js و React؟ React مكتبة لبناء الواجهات فقط، بينما Next.js إطار متكامل يضيف التوجيه والتصيير على الخادم وتحسينات الأداء و SEO.
🎯 التالي: التوجيه (App Router).