كيف تثبت 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

المعيار	React	Next.js
الراوتر	React Router (خارجي)	App Router (مدمج)
SSR	❌ صعب	✅ مدمج
SSG	❌ صعب	✅ مدمج
API Routes	❌ لا يوجد	✅ مدمج
SEO	⚠️ محدود	✅ ممتاز
الصور	⚠️ يدوي	✅ تلقائي
النشر	معقد	✅ سهل

ما ستحتاجه

المتطلب	التفاصيل
جهاز كمبيوتر	ويندوز 10/11 أو ماك
Node.js	الإصدار 18.17 أو أحدث
VS Code	محرر الأكواد
معرفة بـ React	من مسار React
وقت	20-30 دقيقة

⚠️ مهم: إذا لم تكن قد أتممت مسار React، راجعه أولاً.

الجزء الأول: التحقق من Node.js

على ويندوز:

افتح Command Prompt أو PowerShell:

node --version

النتيجة المتوقعة:

v20.x.x

ثم:

npm --version

النتيجة المتوقعة:

10.x.x

على ماك:

افتح Terminal:

node --version
npm --version

إذا ظهرت رسالة 'node' is not recognized — يجب تثبيت Node.js أولاً من nodejs.org.

الجزء الثاني: إنشاء مشروع Next.js

الطريقة 1: create-next-app (موصى به)

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: بدون أسئلة

npx create-next-app@latest my-next-app --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*"

الخطوة التالية: الانتقال للمشروع

cd my-next-app

تشغيل المشروع

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

الملفات المهمة:

الملف	الوظيفة
app/layout.tsx	التخطيط العام (Header, Footer)
app/page.tsx	الصفحة الرئيسية
app/globals.css	الأنماط العامة
next.config.ts	إعدادات Next.js
tailwind.config.ts	إعدادات Tailwind CSS

الجزء الرابع: تعديل المشروع

الخطوة 1: عدّل app/page.tsx

افتح app/page.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 وتأكد من أنه يحتوي على:

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

الإضافات المهمة:

الإضافة	الوظيفة
ES7+ React/Redux/React-Native snippets	اختصارات React
Tailwind CSS IntelliSense	إكمال Tailwind
Prettier	تنسيق الكود
ESLint	تحليل الكود
Auto Rename Tag	إعادة تسمية الوسوم

حل المشاكل الشائعة

🔴 المشكلة 1: 'node' is not recognized

السبب: Node.js غير مثبت.

الحل: حمّل Node.js من nodejs.org (LTS).

🔴 المشكلة 2: Port 3000 is already in use

الحل:

npm run dev -- -p 3001

🔴 المشكلة 3: البناء بطيء

الحل: احذف .next:

rmdir /s /q .next
npm run dev

🔴 المشكلة 4: Cannot find module

الحل:

rm -rf node_modules package-lock.json
npm install

🔴 المشكلة 5: الخط العربي لا يظهر

الحل: تأكد من subsets: ["arabic"] في next/font/google.

جدول الأوامر الأساسية

الأمر	الوظيفة
npx create-next-app@latest	إنشاء مشروع جديد
npm run dev	تشغيل السيرفر
npm run build	بناء للإنتاج
npm start	تشغيل الإنتاج
npm run lint	فحص الكود
npm run dev -- -p 3001	تشغيل على منفذ مختلف

قائمة تحقق نهائية

المهمة	الحالة
تأكيد وجود Node.js	⬜
إنشاء مشروع Next.js	⬜
تشغيل السيرفر	⬜
تعديل page.tsx	⬜
تعديل layout.tsx	⬜
تثبيت إضافات VS Code	⬜
تأكيد عمل Hot Reload	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أصبحت بيئة العمل جاهزة، حان وقت التعلم:

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.