الربط والتنقل

هناك طريقتان للتنقل بين المسارات في Next.js:

• استخدام مكون <Link>
• استخدام خطاف useRouter

ستتناول هذه الصفحة كيفية استخدام <Link> و useRouter()، والغوص أعمق في كيفية عمل التنقل.

مكون <Link>

<Link> هو مكون مدمج يمتد علامة HTML <a> لتوفير الجلب المسبق (Prefetching) والتنقل بين المسارات من جانب العميل. وهو الطريقة الأساسية للتنقل بين المسارات في Next.js.

يمكنك استخدامه عن طريق استيراده من next/link، وتمرير خاصية href إلى المكون:

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">لوحة التحكم</Link>
}

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">لوحة التحكم</Link>
}

هناك خصائص اختيارية أخرى يمكنك تمريرها إلى <Link>. راجع مرجع API للمزيد.

أمثلة

الربط إلى الأجزاء الديناميكية

عند الربط إلى الأجزاء الديناميكية، يمكنك استخدام القوالب الحرفية والاستيفاء لإنشاء قائمة من الروابط. على سبيل المثال، لإنشاء قائمة من منشورات المدونة:

import Link from 'next/link'

export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

التحقق من الروابط النشطة

يمكنك استخدام usePathname() لتحديد ما إذا كان الرابط نشطًا. على سبيل المثال، لإضافة فئة إلى الرابط النشط، يمكنك التحقق مما إذا كان pathname الحالي يتطابق مع href الرابط:

'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'

export function Links() {
  const pathname = usePathname()

  return (
    <nav>
      <ul>
        <li>
          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
            الرئيسية
          </Link>
        </li>
        <li>
          <Link
            className={`link ${pathname === '/about' ? 'active' : ''}`}
            href="/about"
          >
            حول
          </Link>
        </li>
      </ul>
    </nav>
  )
}

'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'

export function Links() {
  const pathname = usePathname()

  return (
    <nav>
      <ul>
        <li>
          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
            الرئيسية
          </Link>
        </li>
        <li>
          <Link
            className={`link ${pathname === '/about' ? 'active' : ''}`}
            href="/about"
          >
            حول
          </Link>
        </li>
      </ul>
    </nav>
  )
}

التمرير إلى id

السلوك الافتراضي لموجه تطبيق Next.js هو التمرير إلى أعلى مسار جديد أو الحفاظ على موضع التمرير للتنقل للخلف وللأمام.

إذا كنت ترغب في التمرير إلى id محدد أثناء التنقل، يمكنك إضافة رابط تجزئة # إلى عنوان URL الخاص بك أو تمرير رابط تجزئة إلى خاصية href. هذا ممكن لأن <Link> يتم عرضه كعنصر <a>.

<Link href="/dashboard#settings">الإعدادات</Link>

// الناتج
<a href="/dashboard#settings">الإعدادات</a>

تعطيل استعادة التمرير

السلوك الافتراضي لموجه تطبيق Next.js هو التمرير إلى أعلى مسار جديد أو الحفاظ على موضع التمرير للتنقل للخلف وللأمام. إذا كنت ترغب في تعطيل هذا السلوك، يمكنك تمرير scroll={false} إلى مكون <Link>، أو scroll: false إلى router.push() أو router.replace().

// next/link
<Link href="/dashboard" scroll={false}>
  لوحة التحكم
</Link>

// useRouter
import { useRouter } from 'next/navigation'

const router = useRouter()

router.push('/dashboard', { scroll: false })

خطاف useRouter()

يسمح خطاف useRouter بتغيير المسارات برمجيًا.

يمكن استخدام هذا الخطاف فقط داخل مكونات العميل ويتم استيراده من next/navigation.

'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      لوحة التحكم
    </button>
  )
}

للحصول على قائمة كاملة بطرق useRouter، راجع مرجع API.

توصية: استخدم مكون <Link> للتنقل بين المسارات ما لم يكن لديك متطلب محدد لاستخدام useRouter.

كيف يعمل التوجيه والتنقل

يستخدم موجه التطبيق نهجًا هجينًا للتوجيه والتنقل. على الخادم، يتم تقسيم كود التطبيق تلقائيًا حسب أجزاء المسار. وعلى العميل، يقوم Next.js بجلب مسبق (Prefetching) وتخزين مؤقت (Caching) لأجزاء المسار. هذا يعني أنه عندما ينتقل المستخدم إلى مسار جديد، لا يعيد المتصفح تحميل الصفحة، ويعاد عرض أجزاء المسار التي تتغير فقط - مما يحسن تجربة التنقل والأداء.

1. الجلب المسبق (Prefetching)

الجلب المسبق هو طريقة لتحميل مسار مسبقًا في الخلفية قبل أن يزوره المستخدم.

هناك طريقتان يتم بهما جلب المسارات مسبقًا في Next.js:

• مكون <Link>: يتم جلب المسارات مسبقًا تلقائيًا عندما تصبح مرئية في نطاق رؤية المستخدم. يحدث الجلب المسبق عند تحميل الصفحة لأول مرة أو عندما تصبح مرئية عن طريق التمرير.
• router.prefetch(): يمكن استخدام خطاف useRouter لجلب المسارات مسبقًا برمجيًا.

يختلف سلوك الجلب المسبق لـ <Link> للمسارات الثابتة والديناميكية:

• المسارات الثابتة: prefetch افتراضيًا true. يتم جلب المسار بالكامل وتخزينه مؤقتًا.
• المسارات الديناميكية: prefetch افتراضيًا تلقائي. يتم جلب التخطيط المشترك فقط حتى أول ملف loading.js وتخزينه مؤقتًا لمدة 30s. هذا يقلل من تكلفة جلب مسار ديناميكي بالكامل، ويعني أنه يمكنك عرض حالة تحميل فورية لتحسين التغذية المرئية للمستخدمين.

يمكنك تعطيل الجلب المسبق عن طريق تعيين خاصية prefetch إلى false.

راجع مرجع API لـ <Link> للمزيد من المعلومات.

جيد أن تعرف:

• الجلب المسبق غير مفعل في وضع التطوير، فقط في الإنتاج.

2. التخزين المؤقت (Caching)

يحتوي Next.js على تخزين مؤقت من جانب العميل في الذاكرة يسمى تخزين الموجه (Router Cache). أثناء تنقل المستخدمين في التطبيق، يتم تخزين حمولة مكون خادم React لأجزاء المسار التي تم جلبها مسبقًا والمسارات التي تمت زيارتها في التخزين المؤقت.

هذا يعني أنه عند التنقل، يتم إعادة استخدام التخزين المؤقت قدر الإمكان، بدلاً من إجراء طلب جديد إلى الخادم - مما يحسن الأداء عن طريق تقليل عدد الطلبات والبيانات المنقولة.

تعرف على المزيد حول كيفية عمل تخزين الموجه (Router Cache) وكيفية تكوينه.

3. العرض الجزئي (Partial Rendering)

العرض الجزئي يعني أنه يتم إعادة عرض أجزاء المسار التي تتغير فقط أثناء التنقل على العميل، ويتم الحفاظ على أي أجزاء مشتركة.

على سبيل المثال، عند التنقل بين مسارين شقيقين، /dashboard/settings و /dashboard/analytics، سيتم عرض صفحات settings و analytics، وسيتم الحفاظ على تخطيط dashboard المشترك.

بدون العرض الجزئي، سيؤدي كل تنقل إلى إعادة عرض الصفحة بالكامل على الخادم. يؤدي عرض الجزء الذي يتغير فقط إلى تقليل كمية البيانات المنقولة ووقت التنفيذ، مما يؤدي إلى تحسين الأداء.

4. التنقل الناعم (Soft Navigation)

بشكل افتراضي، يقوم المتصفح بتنقل صعب بين الصفحات. هذا يعني أن المتصفح يعيد تحميل الصفحة ويعيد تعيين حالة React مثل خطافات useState في تطبيقك وحالة المتصفح مثل موضع التمرير أو العنصر الذي يتم التركيز عليه. ومع ذلك، في Next.js، يستخدم موجه التطبيق التنقل الناعم. هذا يعني أن React يعرض فقط الأجزاء التي تغيرت مع الحفاظ على حالة React وحالة المتصفح، ولا يوجد إعادة تحميل كاملة للصفحة.

5. التنقل للخلف وللأمام

بشكل افتراضي، ستحافظ Next.js على موضع التمرير للتنقل للخلف وللأمام، وإعادة استخدام أجزاء المسار في تخزين الموجه (Router Cache).