كيف تثبت Next.js — دليل إعداد البيئة 2026

بعد أن أتقنت React و Node.js، حان الوقت للانتقال إلى **Next.js** — الإطار الذي يجمع **أفضل ما في العالمين**: Frontend + Backend في مشروع واحد. في هذا الدليل العملي، سنأخذك خطوة بخطوة لتثبيت Next.js وإعداد بيئة العمل، مع حل المشاكل الشائعة. ## ما هو Next.js؟ **Next.js** هو **إطار عمل (Framework)** مبني على **React**، طورته شركة **Vercel**. **تشبيه بسيط:** - **React:** محرك سيارة. - **Node.js:** الوقود. - **Next.js:** السيارة الكاملة الجاهزة للقيادة. **Next.js يضيف لـ React:** - **Routing** جاهز (App Router). - **Server Components**. - **API Routes**. - **SSR / SSG / ISR**. - **Image Optimization**. - **SEO** ممتاز. - **Font Optimization**. - **Bundle Optimization**. ## لماذا Next.js؟ قبل أن نبدأ، دعنا نتفق على الأسباب: - **إطار React الكامل:** لا تحتاج إعدادات معقدة. - **SEO ممتاز:** SSR و SSG. - **أداء عالٍ:** تحسينات تلقائية. - **سهل النشر:** Vercel. - **مستخدم في الإنتاج:** Netflix، TikTok، Twitch. - **الموقع الذي تتصفحه الآن** مبني بـ Next.js! ## الفرق بين React و Next.js <table> <thead> <tr> <th>المعيار</th> <th>React</th> <th>Next.js</th> </tr> </thead> <tbody> <tr> <td><strong>الراوتر</strong></td> <td>React Router (خارجي)</td> <td>App Router (مدمج)</td> </tr> <tr> <td><strong>SSR</strong></td> <td>❌ صعب</td> <td>✅ مدمج</td> </tr> <tr> <td><strong>SSG</strong></td> <td>❌ صعب</td> <td>✅ مدمج</td> </tr> <tr> <td><strong>API Routes</strong></td> <td>❌ لا يوجد</td> <td>✅ مدمج</td> </tr> <tr> <td><strong>SEO</strong></td> <td>⚠️ محدود</td> <td>✅ ممتاز</td> </tr> <tr> <td><strong>الصور</strong></td> <td>⚠️ يدوي</td> <td>✅ تلقائي</td> </tr> <tr> <td><strong>النشر</strong></td> <td>معقد</td> <td>✅ سهل</td> </tr> </tbody> </table> ## ما ستحتاجه <table> <thead> <tr> <th>المتطلب</th> <th>التفاصيل</th> </tr> </thead> <tbody> <tr> <td><strong>جهاز كمبيوتر</strong></td> <td>ويندوز 10/11 أو ماك</td> </tr> <tr> <td><strong>Node.js</strong></td> <td>الإصدار 18.17 أو أحدث</td> </tr> <tr> <td><strong>VS Code</strong></td> <td>محرر الأكواد</td> </tr> <tr> <td><strong>معرفة بـ React</strong></td> <td>من مسار React</td> </tr> <tr> <td><strong>وقت</strong></td> <td>20-30 دقيقة</td> </tr> </tbody> </table> **⚠️ مهم:** إذا لم تكن قد أتممت مسار React، راجعه أولاً. ## الجزء الأول: التحقق من Node.js ### على ويندوز: افتح **Command Prompt** أو **PowerShell**: ```bash node --version ``` **النتيجة المتوقعة:** ``` v20.x.x ``` ثم: ```bash npm --version ``` **النتيجة المتوقعة:** ``` 10.x.x ``` ### على ماك: افتح **Terminal**: ```bash node --version npm --version ``` **إذا ظهرت رسالة `'node' is not recognized`** — يجب تثبيت Node.js أولاً من **nodejs.org**. ## الجزء الثاني: إنشاء مشروع Next.js ### الطريقة 1: create-next-app (موصى به) ```bash npx create-next-app@latest my-next-app ``` **سيطلب منك:** ``` ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? … Yes ✔ Would you like to customize the default import alias? … No ``` **⚠️ اختر الإعدادات كما هو موضح** (TypeScript + ESLint + Tailwind + App Router). ### الطريقة 2: بدون أسئلة ```bash npx create-next-app@latest my-next-app --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*" ``` ### الخطوة التالية: الانتقال للمشروع ```bash cd my-next-app ``` ### تشغيل المشروع ```bash npm run dev ``` **النتيجة المتوقعة:** ``` ▲ Next.js 15.x.x - Local: http://localhost:3000 - Network: http://192.168.x.x:3000 ✓ Ready in 2.1s ``` افتح المتصفح على: **`http://localhost:3000`** **🎉 مبروك! مشروع Next.js يعمل!** ## الجزء الثالث: فهم بنية المشروع ``` my-next-app/ ├── app/ # ← App Router │ ├── layout.tsx # التخطيط العام │ ├── page.tsx # الصفحة الرئيسية │ ├── globals.css # الأنماط العامة │ └── favicon.ico ├── public/ # الملفات العامة ├── node_modules/ ├── .eslintrc.json ├── .gitignore ├── next.config.ts # إعدادات Next.js ├── package.json ├── postcss.config.mjs ├── tailwind.config.ts # إعدادات Tailwind └── tsconfig.json ``` ### الملفات المهمة: <table> <thead> <tr> <th>الملف</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><code>app/layout.tsx</code></td> <td>التخطيط العام (Header, Footer)</td> </tr> <tr> <td><code>app/page.tsx</code></td> <td>الصفحة الرئيسية</td> </tr> <tr> <td><code>app/globals.css</code></td> <td>الأنماط العامة</td> </tr> <tr> <td><code>next.config.ts</code></td> <td>إعدادات Next.js</td> </tr> <tr> <td><code>tailwind.config.ts</code></td> <td>إعدادات Tailwind CSS</td> </tr> </tbody> </table> ## الجزء الرابع: تعديل المشروع ### الخطوة 1: عدّل `app/page.tsx` **افتح `app/page.tsx`** واستبدل محتواه: ```tsx export default function Home() { return ( <main className="flex min-h-screen flex-col items-center justify-center p-24"> <h1 className="text-4xl font-bold text-gray-900 mb-4"> مرحباً بالعالم! 👋 </h1> <p className="text-xl text-gray-600"> أول تطبيق Next.js لي </p> </main> ); } ``` **احفظ الملف.** **النتيجة:** المتصفح سيتحدّث **تلقائياً** (Hot Reload). ### الخطوة 2: عدّل `app/layout.tsx` **افتح `app/layout.tsx`** وتأكد من أنه يحتوي على: ```tsx import type { Metadata } from "next"; import { Cairo } from "next/font/google"; import "./globals.css"; const cairo = Cairo({ subsets: ["arabic", "latin"], weight: ["400", "600", "700", "900"], }); export const metadata: Metadata = { title: "تطبيقي الأول", description: "تعلم Next.js بالعربية", }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="ar" dir="rtl"> <body className={cairo.className}>{children}</body> </html> ); } ``` **الفائدة:** خط Cairo تلقائياً، و RTL للعربية. ## الجزء الخامس: إعداد VS Code ### الإضافات المهمة: <table> <thead> <tr> <th>الإضافة</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><strong>ES7+ React/Redux/React-Native snippets</strong></td> <td>اختصارات React</td> </tr> <tr> <td><strong>Tailwind CSS IntelliSense</strong></td> <td>إكمال Tailwind</td> </tr> <tr> <td><strong>Prettier</strong></td> <td>تنسيق الكود</td> </tr> <tr> <td><strong>ESLint</strong></td> <td>تحليل الكود</td> </tr> <tr> <td><strong>Auto Rename Tag</strong></td> <td>إعادة تسمية الوسوم</td> </tr> </tbody> </table> ## حل المشاكل الشائعة ### 🔴 المشكلة 1: `'node' is not recognized` **السبب:** Node.js غير مثبت. **الحل:** حمّل Node.js من **nodejs.org** (LTS). ### 🔴 المشكلة 2: `Port 3000 is already in use` **الحل:** ```bash npm run dev -- -p 3001 ``` ### 🔴 المشكلة 3: البناء بطيء **الحل:** احذف `.next`: ```bash rmdir /s /q .next npm run dev ``` ### 🔴 المشكلة 4: `Cannot find module` **الحل:** ```bash rm -rf node_modules package-lock.json npm install ``` ### 🔴 المشكلة 5: الخط العربي لا يظهر **الحل:** تأكد من `subsets: ["arabic"]` في `next/font/google`. ## جدول الأوامر الأساسية <table> <thead> <tr> <th>الأمر</th> <th>الوظيفة</th> </tr> </thead> <tbody> <tr> <td><code>npx create-next-app@latest</code></td> <td>إنشاء مشروع جديد</td> </tr> <tr> <td><code>npm run dev</code></td> <td>تشغيل السيرفر</td> </tr> <tr> <td><code>npm run build</code></td> <td>بناء للإنتاج</td> </tr> <tr> <td><code>npm start</code></td> <td>تشغيل الإنتاج</td> </tr> <tr> <td><code>npm run lint</code></td> <td>فحص الكود</td> </tr> <tr> <td><code>npm run dev -- -p 3001</code></td> <td>تشغيل على منفذ مختلف</td> </tr> </tbody> </table> ## قائمة تحقق نهائية <table> <thead> <tr> <th>المهمة</th> <th>الحالة</th> </tr> </thead> <tbody> <tr> <td>تأكيد وجود Node.js</td> <td>⬜</td> </tr> <tr> <td>إنشاء مشروع Next.js</td> <td>⬜</td> </tr> <tr> <td>تشغيل السيرفر</td> <td>⬜</td> </tr> <tr> <td>تعديل <code>page.tsx</code></td> <td>⬜</td> </tr> <tr> <td>تعديل <code>layout.tsx</code></td> <td>⬜</td> </tr> <tr> <td>تثبيت إضافات VS Code</td> <td>⬜</td> </tr> <tr> <td>تأكيد عمل Hot Reload</td> <td>⬜</td> </tr> </tbody> </table> ## ماذا بعد هذا المقال؟ الآن بعد أن أصبحت بيئة العمل جاهزة، حان وقت التعلم: 1. **أول تطبيق Next.js** — تعمق في الأساسيات. 2. **App Router** — التنقل بين الصفحات. 3. **Server Components** — القوة الحقيقية لـ Next.js. ## الخلاصة تثبيت Next.js عملية بسيطة. أهم النقاط: - ✅ **Next.js هو إطار React الكامل.** - ✅ **create-next-app** أسهل طريقة. - ✅ **App Router** هو الحديث. - ✅ **Tailwind CSS** مدمج. - ✅ **Hot Reload** يحدّث تلقائياً. - ✅ **الخطوط والصور** محسّنة تلقائياً. **تذكر:** إذا واجهت مشكلة، ابحث عنها بالإنجليزية على Google.