<Link>

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

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>
}

الخصائص (Props)

فيما يلي ملخص للخصائص المتاحة لمكون Link:

معلومة مفيدة: يمكن إضافة سمات وسم <a> مثل className أو target="_blank" إلى <Link> كخصائص وسيتم تمريرها إلى العنصر الأساسي <a>.

href (مطلوب)

المسار أو URL للانتقال إليه.

<Link href="/dashboard">لوحة التحكم</Link>

يمكن أن يقبل href كائنًا أيضًا، على سبيل المثال:

// الانتقال إلى /about?name=test
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  حول
</Link>

replace

القيمة الافتراضية false. عندما تكون true، سيستبدل next/link حالة التاريخ الحالية بدلاً من إضافة URL جديد إلى مكدس تاريخ المتصفح.

import Link from 'next/link'

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

import Link from 'next/link'

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

scroll

القيمة الافتراضية true. السلوك الافتراضي لـ <Link> هو التمرير إلى أعلى المسار الجديد أو الحفاظ على موضع التمرير للتنقل للخلف وللأمام. عندما تكون false، لن يقوم next/link بالتمرير إلى أعلى الصفحة بعد التنقل.

import Link from 'next/link'

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

import Link from 'next/link'

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

prefetch

القيمة الافتراضية true. عندما تكون true، سيقوم next/link بجلب الصفحة (المشار إليها بـ href) مسبقًا في الخلفية. هذا مفيد لتحسين أداء التنقل من جانب العميل. سيتم تحميل أي <Link /> في نطاق الرؤية (مبدئيًا أو عن طريق التمرير) مسبقًا.

يمكن تعطيل الجلب المسبق عن طريق تمرير prefetch={false}. يتم تمكين الجلب المسبق فقط في بيئة الإنتاج.

import Link from 'next/link'

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

import Link from 'next/link'

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

أمثلة

الربط مع المسارات الديناميكية

بالنسبة للمسارات الديناميكية، يمكن أن يكون استخدام القوالب النصية (template literals) مفيدًا لإنشاء مسار الرابط.

على سبيل المثال، يمكنك إنشاء قائمة من الروابط للمسار الديناميكي app/blog/[slug]/page.js:

import Link from 'next/link'

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

Middleware

من الشائع استخدام Middleware للمصادقة أو أغراض أخرى تتضمن إعادة توجيه المستخدم إلى صفحة مختلفة. لكي يعمل مكون <Link /> بشكل صحيح في جلب الروابط مع إعادة الكتابة عبر Middleware، تحتاج إلى إخبار Next.js بكل من URL المعروض وURL المطلوب جلبها مسبقًا. هذا مطلوب لتجنب طلبات الجلب غير الضرورية إلى middleware لمعرفة المسار الصحيح للجلب المسبق.

على سبيل المثال، إذا كنت تريد تقديم مسار /dashboard الذي يحتوي على واجهات للمستخدمين المصادق عليهم والزوار، يمكنك إضافة شيء مشابه لما يلي في Middleware الخاص بك لإعادة توجيه المستخدم إلى الصفحة الصحيحة:

export function middleware(req) {
  const nextUrl = req.nextUrl
  if (nextUrl.pathname === '/dashboard') {
    if (req.cookies.authToken) {
      return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
    } else {
      return NextResponse.rewrite(new URL('/public/dashboard', req.url))
    }
  }
}

في هذه الحالة، سترغب في استخدام الكود التالي في مكون <Link /> الخاص بك:

import Link from 'next/link'
import useIsAuthed from './hooks/useIsAuthed'

export default function Page() {
  const isAuthed = useIsAuthed()
  const path = isAuthed ? '/auth/dashboard' : '/dashboard'
  return (
    <Link as="/dashboard" href={path}>
      لوحة التحكم
    </Link>
  )
}

سجل الإصدارات