ما هو Next.js؟
Next.js إطار عمل مبني على React، طوّرته شركة Vercel، لبناء مواقع وتطبيقات سريعة ومُحسّنة لمحرّكات البحث (SEO) بسهولة.
React مكتبة لبناء الواجهات، و Next.js يضيف فوقها كل ما تحتاجه لموقع كامل: التوجيه، التصيير على الخادم، وتحسين الأداء.
لماذا Next.js؟
- SEO ممتاز: يصيّر الصفحات على الخادم فتظهر لمحرّكات البحث.
- سرعة فائقة: تحسينات تلقائية للصور والخطوط والأكواد.
- توجيه جاهز: بنية ملفات بسيطة بدل إعداد يدوي.
- هذا الموقع (The Code Fix) نفسه مبني بـ Next.js!
CSR مقابل SSR
| الطريقة | متى تُرسم الصفحة | الأثر على SEO |
|---|---|---|
| CSR (React وحده) | في المتصفّح | ضعيف |
| SSR/SSG (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 Router).