Next.js: مقدمة إلى Next.js 16

// app/dashboard/page.tsx — Server Component افتراضيًا
export default async function DashboardPage() {
  const tasks = await fetch('https://api.example.com/tasks');
  const projects = await fetch('https://api.example.com/projects');

  return (
    <div className="grid grid-cols-2 gap-4">
      <TaskSummary tasks={tasks} />
      <ProjectList projects={projects} />
    </div>
  );
}

Diagram: Next.js 16; App Router توجيه نظام الملفات; محرك العرض SSR/SSG/ISR/PPR; جمع البيانات Server Components; مسارات API Route Handlers; أدوات البناء Turbopack.

# 1. استخدام create-next-app لإنشاء مشروع (موصى به)
npx create-next-app@latest my-next-app --ts --tailwind --app

# 2. الانتقال إلى دليل المشروع
cd my-next-app

# 3. تشغيل خادم التطوير (Turbopack افتراضيًا)
npm run dev

# 4. مقتطف من مخرجات الطرفية
▲  ▲  ▲  ▲  ▲  ▲
 ▲  Next.js 16.2.10 (Turbopack)
 ▲  Local:        http://localhost:3000
 ▲  Environments: .env.local

▲ Next.js 16.2.10
- Local: http://localhost:3000
✓ Ready in 876ms (Turbopack)

خادم التطوير يعمل على http://localhost:3000. افتح هذا الرابط في المتصفح لرؤية صفحة الترحيب الافتراضية لـ Next.js.

// app/page.tsx — صفحة واحدة = جمع بيانات + عرض + تفاعل
export default async function HomePage() {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/1');

  return (
    <main>
      <h1 className="text-2xl font-bold">مرحبًا بك في Next.js 16</h1>
      <p>محتوى معروض من الخادم: {data.title}</p>
    </main>
  );
}

<h1>مرحبًا بك في Next.js 16</h1>
<p>محتوى معروض من الخادم: sunt aut facere repellat provident</p>

المتصفح يعرض: عنوان "مرحبًا بك في Next.js 16" ومحتوى معروض من الخادم من API — تم جلب البيانات على الخادم وتسليمها كـ HTML مُعد مسبقًا.

// Pages Router النموذج القديم (v12)
export async function getServerSideProps() {
  return { props: { data: await fetchData() } };
}
export default function Page({ data }) {
  return <div>{data}</div>; // الكود بالكامل على جانب العميل
}

// App Router النموذج الجديد (v16)
export default async function Page() {
  const data = await fetchData(); // جلب البيانات مباشرة داخل المكون
  return <div>{data}</div>; // Server Component افتراضيًا
}

يعرض واجهة مستخدم مكون Page.

// ============================================
// Pages Router (pages/posts/[id].tsx)
// يتطلب تصديرًا إضافيًا getServerSideProps
// ============================================
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  return { props: { post: await res.json() } };
}
export default function PostPage({ post }) {
  return <h1>{post.title}</h1>;
}

// ============================================
// App Router (app/posts/[id]/page.tsx)
// مكون async مباشر، لا يتطلب تصديرًا إضافيًا
// ============================================
export default async function PostPage({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.id}`);
  return <h1>{post.title}</h1>;
}

Pages Router: 18 سطرًا من الكود (بما في ذلك getServerSideProps)
App Router: 8 أسطر من الكود (مكون async مباشر)
توفير 55% من الكود النموذجي

App Router يقلل الكود النموذجي بنسبة 55%: لا حاجة لـ getServerSideProps، مكون async مباشر، وجلب تلقائي للبيانات داخل جسم المكون.

# Next.js 16 تشغيل خادم التطوير، يستخدم Turbopack افتراضيًا
npm run dev

# مخرجات الطرفية
▲  ▲
▲  Next.js 16.2
▲  - Local: http://localhost:3000
▲  - Turbopack (experimental): ✓ loaded in 876ms

# احفظ بعد تعديل أي ملف — تحديثات فورية
✔ Updated /app/page.tsx in 3ms

Turbopack وقت البدء: 876ms
وقت التحديث الساخن: 3ms
بالمقارنة Webpack بدء التشغيل البارد: 5-10s

Turbopack HMR: 4ms لكل تحديث ملف (مقابل 50-200ms مع Webpack). البدء البارد: 876ms (مقابل 5-10s). بناء المشاريع الكبيرة: أسرع بـ 10 مرات إجمالاً.

// app/page.tsx — استخدام تعليمة use cache
import { unstable_cache as cache } from 'next/cache';

export default async function Page() {
  const data = await getData();
  return <div>{JSON.stringify(data)}</div>;
}

const getData = cache(
  async () => {
    return fetch('https://api.example.com/expensive-data');
  },
  ['expensive-data'],
  { revalidate: 3600 }
);

يجلب البيانات ويعرض النتيجة.

// ============================================
// PPR هيكل ثابت + use cache تخزين مؤقت ذكي
// الصفحة الرئيسية = رأس ثابت + توصيات محتوى ديناميكي (مخزنة مؤقتًا لمدة ساعة)
// ============================================

// app/page.tsx
import { Suspense } from 'react';
import { RecommendedProducts } from './RecommendedProducts';

export default function HomePage() {
  return (
    <div>
      <header className="bg-gray-100 p-4">
        <h1>مرحبًا بك في ShopHub</h1>
        <nav>الفئات | العروض | الدعم</nav>
      </header>

      {/* حدود PPR: توصيات محتوى ديناميكي */}
      <Suspense fallback={<div className="animate-pulse h-40 bg-gray-200" />}>
        <RecommendedProducts />
      </Suspense>
    </div>
  );
}

يعرض الهيكل الثابت فورًا، مع تحميل المحتوى الديناميكي داخل حدود Suspense.
النص المرئي: مرحبًا بك في ShopHub | الفئات | العروض | الدعم

// app/RecommendedProducts.tsx
import { unstable_cache as cache } from 'next/cache';

const getProducts = cache(
  async () => {
    return fetch('https://fakestoreapi.com/products?limit=4');
  },
  ['recommended-products'],
  { revalidate: 3600 }
);

export async function RecommendedProducts() {
  const products = await getProducts();
  return (
    <div className="grid grid-cols-4 gap-4 p-4">
      {products.map(p => (
        <div key={p.id} className="border rounded p-2">
          <img src={p.image} alt={p.title} className="h-32" />
          <p className="font-bold">{p.title}</p>
          <p>${p.price}</p>
        </div>
      ))}
    </div>
  );
}

عند تحميل الصفحة:
1. الرأس الثابت (شريط التنقل) يظهر فورًا
2. منطقة التوصيات تعرض شاشة هيكلية (عنصر نائب رمادي متحرك)
3. بمجرد أن تصبح البيانات جاهزة، يتم عرض 4 بطاقات منتجات متدفقة
4. الزيارات المتكررة لنفس المستخدم خلال ساعة واحدة تُخدم من التخزين المؤقت، لا حاجة لإعادة fetch

تعرض الصفحة كما هو موصوف أعلاه، مع تحديث واجهة المستخدم بناءً على السلوك الموصوف.

// ============================================
// Server Action: إرسال النموذج يستدعي دالة خلفية مباشرة
// لا حاجة لإنشاء API Route يدويًا
// ============================================

// app/contact/page.tsx
export default function ContactPage() {
  async function handleSubmit(formData) {
    'use server';
    const name = formData.get('name');
    const email = formData.get('email');
    // الكتابة مباشرة إلى قاعدة البيانات أو إرسال بريد إلكتروني
    console.log(`جهة اتصال جديدة: ${name} <${email}>`);
    // إعادة التوجيه إلى صفحة النجاح
    redirect('/contact/success');
  }

  return (
    <form action={handleSubmit}>
      <input name="name" placeholder="اسمك" required />
      <input name="email" type="email" placeholder="بريدك الإلكتروني" required />
      <button type="submit">إرسال</button>
    </form>
  );
}

نموذج يحتوي على حقول إدخال وزر إرسال.
عند الإرسال، تعالج server action البيانات وتعيد التوجيه إلى صفحة النجاح.

بعد إرسال النموذج:
1. دالة handleSubmit تُنفذ على الخادم
2. formData تجمع حقول النموذج تلقائيًا
3. redirect تنفذ إعادة توجيه 303 من الخادم
4. لا حاجة لكتابة كود API Route / fetch

// ============================================
// مثال شامل: صفحة تفاصيل منتج للتجارة الإلكترونية
// الميزات: SSG كتالوج ثابت + PPR توصيات + ISR تعليقات
// ============================================

// app/products/[id]/page.tsx
import { Suspense } from 'react';
import { notFound } from 'next/navigation';

// توليد معاملات الصفحة الثابتة (توليد مسبق أثناء البناء)
export async function generateStaticParams() {
  const products = await fetch('https://fakestoreapi.com/products');
  const ids = await products.json();
  return ids.map(p => ({ id: String(p.id) }));
}

export default async function ProductPage({ params }) {
  const product = await fetch(
    `https://fakestoreapi.com/products/${params.id}`
  );

  if (!product) {
    notFound();
  }

  return (
    <div className="container mx-auto p-4">
      {/* القسم الثابت: معلومات المنتج الأساسية */}
      <div className="flex gap-8">
        <img src={product.image} alt={product.title} className="w-64 h-64" />
        <div>
          <h1 className="text-2xl font-bold">{product.title}</h1>
          <p className="text-xl text-green-600">${product.price}</p>
          <p className="mt-4">{product.description}</p>
        </div>
      </div>

      {/* حدود PPR الديناميكية: منتجات موصى بها */}
      <Suspense fallback={<div>جارٍ تحميل التوصيات...</div>}>
        <Recommendations category={product.category} />
      </Suspense>

      {/* قسم تعليقات ISR: التجديد كل ساعة */}
      <Suspense fallback={<div>جارٍ تحميل المراجعات...</div>}>
        <Reviews productId={params.id} />
      </Suspense>
    </div>
  );
}

// app/products/[id]/Recommendations.tsx
async function Recommendations({ category }) {
  const products = await fetch(
    `https://fakestoreapi.com/products/category/${category}`
  );
  return (
    <div className="mt-8">
      <h2 className="text-xl font-bold">منتجات موصى بها</h2>
      <div className="grid grid-cols-4 gap-4 mt-4">
        {products.slice(0, 4).map(p => (
          <div key={p.id} className="border p-2 rounded">{p.title}</div>
        ))}
      </div>
    </div>
  );
}

// app/products/[id]/Reviews.tsx
async function Reviews({ productId }) {
  const reviews = await fetch(
    `https://api.example.com/reviews/${productId}`,
    { next: { revalidate: 3600 } }
  );
  return (
    <div className="mt-8">
      <h2 className="text-xl font-bold">تقييمات العملاء</h2>
      {reviews.map(r => (
        <div key={r.id} className="border-b py-2">
          <p className="font-bold">{r.author}</p>
          <p>{r.content}</p>
        </div>
      ))}
    </div>
  );
}

1. معلومات المنتج الأساسية تُعرض فورًا (SSG HTML ثابت)
2. منطقة التوصيات تعرض "جارٍ تحميل التوصيات..." كعنصر نائب
3. قسم التعليقات يعرض "جارٍ تحميل المراجعات..." كعنصر نائب
4. عرض متدفق لمحتوى التوصيات (PPR)
5. محتوى التعليقات المخزنة مؤقتًا يُحدث حسب الحاجة بعد ساعة واحدة (ISR)
6. الصفحة بأكملها تحتوي على بيانات SEO الوصفية كاملة