دليل المطور: Next.js 16.3 والتنقل الفوري

أُطلق إصدار Next.js 16.3 Preview في 25 يونيو 2026، وميزته الأبرز هي Instant Navigations — مجموعة أدوات اختيارية تُغلق أخيراً الفجوة بين تطبيقات Next.js المعتمدة على الخادم وانسيابية تطبيقات الصفحة الواحدة (SPA). إلى جانب Partial Prefetching، يُعيد هذا الإصدار تشكيل الطريقة التي نُفكر بها في التنقل ضمن مشاريع App Router.

يستعرض هذا الدليل البدائل الجديدة وخيارات التهيئة وخطوات ترحيل المسارات القائمة.

لماذا كان التنقل يبدو بطيئاً

في تطبيق يعتمد على Server Components، كل نقرة على رابط تستدعي رحلة شبكة. لا يتحرك شيء على الشاشة حتى يردّ الخادم. هذا مقبول للمواقع التحريرية، لكنه يبدو معطوباً عند مقارنته بتطبيق React SPA يُظهر هيكل الصفحة التالية على الفور — خصوصاً في لوحات التحكم والمحادثات والتجارة الإلكترونية.

يحلّ Next.js 16.3 المشكلة دون التخلي عن نموذج الخادم. تحتفظ بـ Server Components والبثّ المتدفق وجلب البيانات لكل مسار، لكن كل تنقل ينتهي بهيكل مرئي خلال إطار واحد.

الخطوة 1 — تفعيل Cache Components

كل شيء يبدأ بعلم واحد في ملف next.config.ts:

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  cacheComponents: true,
};
 
export default nextConfig;

cacheComponents هو العلم الجامع للنموذج الجديد "ديناميكي افتراضياً" الذي يبنيه فريق Vercel منذ عام. لا تخزين مخفي ولا حفظ ضمني — أنت من يُفعّل كل حدود يدوياً. أكّد الفريق أنه سيصبح السلوك الافتراضي في إصدار رئيسي مقبل.

بعد تفعيله، يُصنَّف كل مسار ينتظر بيانات الخادم تحت أحد الأنماط الثلاثة: Stream أو Cache أو Block.

الخطوة 2 — اختيار Stream أو Cache أو Block لكل مسار

عندما ينتظر مسار بياناتٍ ما، تُظهره لوحة Instant Insights الجديدة في أدوات مطوّر Next.js بوصفه غير فوري. وظيفتك تحويله إلى أحد الأنماط الثلاثة.

Stream عبر <Suspense>

غلّف الجزء الأبطأ بـ <Suspense> مع مكوّن بديل. يرى المستخدم الهيكل فوراً، ثم يتدفق المحتوى لاحقاً.

import { Suspense } from 'react';
import { ProductDetails } from './product-details';
 
export default function ProductPage({ params }: { params: { id: string } }) {
  return (
    <main>
      <h1>المنتج</h1>
      <Suspense fallback={<p>جارٍ التحقق من المخزون...</p>}>
        <ProductDetails id={params.id} />
      </Suspense>
    </main>
  );
}

استخدم Stream للبيانات الخاصة بكل طلب والتي لا يمكن تخزينها — حالة المخزون، الأسعار المُخصّصة، المؤشرات الحيّة.

Cache عبر 'use cache'

إذا كانت البيانات قابلة للمشاركة بين الطلبات، فضع التوجيه 'use cache' على المكوّن أو الدالة. يُعيد Next.js استخدام التصيير السابق ويُجري تحديث السلامة في الخلفية.

'use cache';
 
export async function CategorySidebar() {
  const categories = await fetch('https://api.example.com/categories').then(r => r.json());
  return (
    <nav>
      {categories.map(c => (
        <a key={c.slug} href={`/c/${c.slug}`}>{c.name}</a>
      ))}
    </nav>
  );
}

تظهر الواجهة المخزّنة فوراً عند التنقل. Cache هو الخيار الأمثل لشريط التنقل، التصنيفات، وكل ما لا يتغير من مستخدم لآخر.

Block عندما يكون السلوك القديم مطلوباً

بعض المسارات — المقالات الطويلة، الصفحات القانونية — لا ينبغي أن تُظهر هيكلاً وامضاً. أخبر Next.js أن يحجب:

export const instant = false;

يختفي تحذير Instant Insights ويعمل المسار بالنمط الخادم التقليدي.

الخطوة 3 — تفعيل Partial Prefetching

كان Next.js سابقاً يُرسل طلب prefetch لكل <Link> ظاهر في المنطقة المرئية. شريط جانبي بعشرين محادثة كان يُولّد عشرين طلباً. مع Partial Prefetching يجلب Next.js هيكلاً قابلاً لإعادة الاستخدام لكل مسار ويُخزّنه على العميل طوال الجلسة.

فعّله إلى جانب Cache Components:

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
};
 
export default nextConfig;

النتيجة في تبويب Network مذهلة. بدل عشرات طلبات prefetch المكرّرة عند التمرير، ترى الآن طلباً واحداً لكل مسار فريد. ويُشير فريق Vercel إلى أن هذه الآلية ستكون أيضاً أساس تجارب التنقل دون اتصال في الإصدارات المقبلة.

الخطوة 4 — Prefetch مخصّص لرابط معيّن

التخزين الافتراضي للهيكل وحده هو المستوى الصحيح. أحياناً تريد محتوى أكثر جاهزية — مثلاً، رأس المحادثة الذي ينبغي أن يظهر قبل بثّ الرسائل. استخدم <Link prefetch>:

import Link from 'next/link';
 
export function ChatLink({ id, title }: { id: string; title: string }) {
  return (
    <Link href={`/chat/${id}`} prefetch>
      {title}
    </Link>
  );
}

لن يُصيّر Next.js مع ذلك المسار بالكامل عميقاً — فقط ما هو متاح بشكل متزامن أو موسوم بـ 'use cache'. يختفي بذلك تنازل "كل شيء أو لا شيء" السابق.

ولتمديد التغطية على حساب حمل خادم أكبر:

export const prefetch = 'allow-runtime';

الخطوة 5 — التحقق عبر Navigation Inspector

تتضمّن أدوات مطوّر Next.js الآن Navigation Inspector يُجمّد كل تنقّل على الهيكل، لترى بدقّة ما تم prefetch لكل مسار. اضغط Resume فتظهر الصفحة الكاملة. هذه أسرع طريقة لاكتشاف مسارات انزلقت إلى Block وكان يُفترض أن تكون Stream.

الخطوة 6 — التثبيت عبر Playwright

لمنع التراجعات، شُحن @next/playwright مع المساعد instant(). غلّف تأكيداتك به ليفشل الاختبار إذا احتاج التنقّل إلى جولة شبكة لإظهار الهيكل:

import { expect, test } from '@playwright/test';
import { instant } from '@next/playwright';
 
test('عنوان المنتج متاح على الفور', async ({ page }) => {
  await page.goto('/products/shoes');
 
  await instant(page, async () => {
    await page.click('a[href="/products/hats"]');
    await expect(page.locator('h1')).toContainText('قبعة بيسبول');
    await expect(page.getByText('جارٍ التحقق من المخزون...')).toBeVisible();
  });
 
  await expect(page.getByText('12 متوفّر')).toBeVisible();
});

مع CI، تُفرض ميزانية الأداء بالاختبارات لا بالحدس.

خطة ترحيل لمشروع App Router قائم

1. شغّل npm install next@preview على فرع جانبي.
2. أضف cacheComponents: true إلى next.config.ts. ابنِ المشروع واطّلع على تحذيرات Instant Insights.
3. راجع كل مسار محذَّر. هل البيانات لكل طلب أم لكل مستخدم أم مشتركة؟ اختر Stream أو Cache أو Block وفق الحالة.
4. غلّف الأجزاء غير المتزامنة في <Suspense> مع fallback ذي معنى. تجنّب السبينر العام — الهيكل بشكل التخطيط هو ما يجعل الهيكل يبدو فعلاً فورياً.
5. ضع 'use cache' على الدوال والمكونات القابلة للمشاركة. حدّد علامات وأعمار التخزين صراحةً إن كنت تعتمد على إعادة التحقق.
6. فعّل partialPrefetching: true. تحقق في الإنتاج من نمط "هيكل واحد لكل مسار" في تبويب الشبكة.
7. أضف اختبارات instant() لـ Playwright على مسارات التنقّل الأكثر استخداماً.
8. استخدم <Link prefetch> بانتقائية على الروابط التي يستحق فيها تمديد الكاش الحمل الإضافي.

متى يكون Block هو الجواب الصحيح

التنقّل الفوري ليس مجانياً. Cache Components تدفعك نحو حدود أصغر وأكثر انضباطاً. إذا كان مسار ما نادر الزيارة أو مصمَّم عمداً للتصيير الخادمي أو مبنياً حول محتوى طويل دون هيكل مشترك، فضع instant = false وامضِ. صمّم فريق Vercel نمط Block خصيصاً كي لا يُجبَر أحد على إعادة هيكلة كل صفحة قديمة.

ما يتغيّر لفِرَق منطقة الشرق الأوسط وشمال إفريقيا

بالنسبة لعملاء "نقطة" الذين يصل مستخدموهم عبر شبكات جوال متفاوتة في تونس والمملكة العربية السعودية وبقية المنطقة، الفائدة ملموسة. هيكل يُصيَّر في إطار واحد يُخفي زمن الاستجابة نحو منطقة حافّة في فرانكفورت أو البحرين، حتى على اتصال خلوي مزدحم. مع 'use cache' على عناصر الإطار المشتركة — شريط التنقّل، شجرة التصنيفات، مُحدِّد العملة — لم تعد أول نقلة تُقاس بزمن الذهاب والإياب.

موعد الإصدار المستقر

نُشر Next.js 16.3 Preview في 25 يونيو 2026، ويُتوقع الإصدار المستقر خلال أسابيع. اختبر فريق Vercel السلوكيات الجديدة على v0 قبل الإطلاق، وأبلغ عن أزمنة تنقّل تقترب من الصفر على المسارات التي كانت الأبطأ.

إن كنت تُشغّل تطبيق Next.js في الإنتاج، فهذه هي الترقية التي يستحق تخصيص سبرنت لها. التحوّل الذهني صغير — Stream أو Cache أو Block — والمكسب الذي يلمسه المستخدم هو الأكبر منذ App Router نفسه.

المصادر: Next.js 16.3: Instant Navigations، دليل Prefetching في Next.js، إصدارات vercel/next.js.