شرح Next.js للمبتدئين: دليل شامل من الصفر

ما هو Next.js؟

Next.js إطار عمل (framework) مبني على React، يضيف إليه ميزات جاهزة للإنتاج: التوجيه، العرض من الخادم (SSR)، تحسين الصور، تقسيم الكود تلقائياً، ودعم TypeScript من البداية.

باختصار، React يعطيك مكتبة لبناء الواجهة، Next.js يعطيك تطبيق ويب متكامل جاهز للنشر.

لماذا نختار Next.js؟

• أداء عالٍ: الصفحات تُولَّد في الخادم، يصل المستخدم إلى HTML جاهز
• SEO ممتاز: محرّكات البحث ترى محتوى صفحاتك فوراً، بدون انتظار JavaScript
• تجربة مطوّر رائعة: hot reload، TypeScript، routing تلقائي
• يستخدم من كبرى الشركات: TikTok, Netflix, Hulu, Notion

التثبيت والبدء

تحتاج Node.js 18 أو أحدث مُثبّتاً. افتح الطرفية وأنشئ مشروعاً جديداً:

# أنشئ مشروع Next.js جديد
npx create-next-app@latest my-app

# ادخل للمجلد وشغّل السيرفر
cd my-app
npm run dev

سيسألك عن عدّة خيارات أثناء التثبيت:

• TypeScript? → Yes (موصى به)
• ESLint? → Yes
• Tailwind CSS? → Yes إن كنت تفضّله
• App Router? → Yes (الأحدث)
• src/ directory? → حسب تفضيلك

افتح http://localhost:3000 وستجد التطبيق شغّالاً.

هيكل المشروع

my-app/
├── app/
│   ├── page.tsx        # الصفحة الرئيسية
│   ├── layout.tsx      # التصميم المشترك
│   └── globals.css     # الأنماط العامة
├── public/             # ملفات ثابتة (صور، أيقونات)
├── next.config.js      # إعدادات Next.js
└── package.json

القاعدة الأهم: كل ملف page.tsx داخل app/ يصبح رابطاً (route) تلقائياً.

أول صفحة لك

افتح app/page.tsx واستبدل محتواها:

// الصفحة الرئيسية
export default function HomePage() {
  return (
    <main className="p-8">
      <h1 className="text-3xl font-bold">مرحباً بك في Next.js</h1>
      <p className="mt-2 text-gray-600">
        هذه أول صفحة لك.
      </p>
    </main>
  );
}

احفظ الملف — المتصفّح يُعيد التحميل تلقائياً.

إضافة صفحة جديدة

لإنشاء صفحة على الرابط /about، أنشئ app/about/page.tsx:

export default function AboutPage() {
  return <h1>صفحة من نحن</h1>;
}

بسيط! الرابط يعمل مباشرة على http://localhost:3000/about.

الروابط بين الصفحات

استخدم مكوّن Link لتنقّل سريع بدون إعادة تحميل:

import Link from "next/link";

export default function Navigation() {
  return (
    <nav className="flex gap-4">
      <Link href="/">الرئيسية</Link>
      <Link href="/about">من نحن</Link>
      <Link href="/blog/hello">مقال</Link>
    </nav>
  );
}

المسارات الديناميكية

لصفحة مقال يتغيّر رابطها، أنشئ app/blog/[slug]/page.tsx:

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return (
    <article>
      <h1>المقال: {slug}</h1>
    </article>
  );
}

الآن /blog/react-tips و /blog/nextjs-guide يعملان بنفس المكوّن.

Server Components: الميزة الأقوى

في App Router الحديث، كل مكوّن هو Server Component افتراضياً. يعني يُنفَّذ في الخادم ويصل المستخدم إلى HTML جاهز:

// مكوّن server — يمكنك استخدام async/await مباشرة
async function getPosts() {
  const res = await fetch("https://api.example.com/posts");
  return res.json();
}

export default async function Posts() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((p: { id: number; title: string }) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

لا state، لا useEffect، لا مشاكل hydration. فقط بيانات وواجهة.

متى نحتاج Client Components؟

حين نحتاج تفاعلاً (نقر، كتابة، state)، نُضيف "use client" في أول الملف:

"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      نُقِر عليّ — {count}
    </button>
  );
}

أخطاء شائعة

• "Hydration mismatch": تستخدم Date.now() أو Math.random() في مكوّن يعمل على الخادم والعميل. الحل: انقل الكود لـ useEffect أو استخدم Client Component.
• "Module not found": نسيت تثبيت الحزمة — شغّل npm install <package>.
• الصفحة لا تظهر: تحقّق من اسم الملف — يجب أن يكون page.tsx بالضبط، ليس Page.tsx.

الأسئلة الشائعة

هل Next.js أفضل من React العادي؟

Next.js ليس بديلاً لـ React — هو امتداد له. إن كنت تبني تطبيقاً كاملاً (موقع أو منصّة)، فـ Next.js يوفّر عليك ساعات من الإعداد. لتجربة React فقط (مشاريع تعلّم بسيطة)، Vite أسرع.

هل أحتاج تعلّم React قبل Next.js؟

نعم — Next.js مبني على React. ابدأ بـ React (المكوّنات، props، state) لمدّة أسبوع، ثم انتقل لـ Next.js.

كم يستغرق تعلّم Next.js؟

إن كنت تعرف React، تصبح منتجاً في Next.js خلال أسبوع. لإتقان Server Components و Data Fetching و Caching، احسب شهراً من المشاريع العملية.

هل Next.js مناسب لمشاريع صغيرة؟

نعم — الإعداد سهل، والـ deployment على Vercel يتم بضغطة. حتى المواقع الشخصية والمدوّنات تستفيد من SSG.