نظرة عميقة على Next.js 15: إجراءات الخادم والعرض الجزئي المسبق وأكثر

يمثّل Next.js 15 تطوّراً كبيراً في أطر React، مع Server Actions مستقرة، والعرض الجزئي المسبق (Partial Prerendering) الرائد، ونظام تخزين مؤقت مُعاد تصميمه بالكامل.

Server Actions: مستقرة وجاهزة للإنتاج

أصبحت Server Actions الآن مستقرة وهي الطريقة المُوصى بها للتعامل مع التعديلات في Next.js:

// app/actions.ts
"use server"

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;

  await db.posts.create({ title, content });
  revalidatePath("/posts");
}

// app/new-post/page.tsx
import { createPost } from "./actions";

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <button type="submit">Create Post</button>
    </form>
  );
}

العرض الجزئي المسبق (PPR)

يجمع PPR بين المحتوى الثابت والديناميكي في الصفحة نفسها:

• الهيكل الثابت يُحمَّل فوراً من شبكة CDN
• المحتوى الديناميكي يتدفّق عند جاهزيته
• أفضل ما في عالمَي SSG و SSR

// next.config.js
module.exports = {
  experimental: {
    ppr: true,
  },
};

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

export default function Page() {
  return (
    <div>
      <StaticHeader />  {/* Prerendered */}
      <Suspense fallback={<Loading />}>
        <DynamicContent />  {/* Streamed */}
      </Suspense>
    </div>
  );
}

إعدادات التخزين المؤقت الجديدة

يغيّر Next.js 15 التخزين المؤقت ليكون اختيارياً بالاشتراك بدلاً من الإلغاء:

• طلبات ()fetch لم تعد مُخزّنة افتراضياً
• معالِجات المسارات ديناميكية افتراضياً
• استخدم cache: "force-cache" للبيانات الثابتة

دليل الانتقال

1. حدّث الحزمة: npm install next@15
2. راجع سلوك التخزين المؤقت لجلب البيانات
3. حوّل مسارات API إلى Server Actions حيثما أمكن
4. فعّل PPR للصفحات الهجينة