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

يسمح موجه Next.js بإجراء انتقالات بين الصفحات من جانب العميل، مشابهًا لتطبيق الصفحة الواحدة.

يتم توفير مكون React يسمى Link لتنفيذ هذا الانتقال من جانب العميل.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">الصفحة الرئيسية</Link>
      </li>
      <li>
        <Link href="/about">من نحن</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">مقال المدونة</Link>
      </li>
    </ul>
  )
}

export default Home

يستخدم المثال أعلاه روابط متعددة. كل رابط يربط مسارًا (href) بصفحة معروفة:

• / → pages/index.js
• /about → pages/about.js
• /blog/hello-world → pages/blog/[slug].js

سيتم جلب أي <Link /> في نطاق الرؤية (مبدئيًا أو عن طريق التمرير) مسبقًا افتراضيًا (بما في ذلك البيانات المقابلة) للصفحات التي تستخدم التوليد الثابت. يتم جلب البيانات المقابلة لطرق العرض من جانب الخادم (SSR) فقط عند النقر على <Link />.

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

يمكنك أيضًا استخدام الاستيفاء لإنشاء المسار، وهو مفيد لـ شرائح المسار الديناميكية. على سبيل المثال، لعرض قائمة بالمشاركات التي تم تمريرها إلى المكون كخاصية:

import Link from 'next/link'

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

export default Posts

يتم استخدام encodeURIComponent في المثال للحفاظ على توافق المسار مع utf-8.

بدلاً من ذلك، باستخدام كائن URL:

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

الآن، بدلاً من استخدام الاستيفاء لإنشاء المسار، نستخدم كائن URL في href حيث:

• pathname هو اسم الصفحة في دليل pages. /blog/[slug] في هذه الحالة.
• query هو كائن مع الشريحة الديناميكية. slug في هذه الحالة.

حقن الموجه

للوصول إلى كائن الموجه (router) في مكون React، يمكنك استخدام useRouter أو withRouter.

بشكل عام نوصي باستخدام useRouter.

التوجيه الأمرية

يجب أن يكون next/link قادرًا على تغطية معظم احتياجات التوجيه الخاصة بك، ولكن يمكنك أيضًا إجراء عمليات التنقل من جانب العميل بدونه، راجع توثيق next/router.

يوضح المثال التالي كيفية إجراء عمليات التنقل الأساسية بين الصفحات باستخدام useRouter:

import { useRouter } from 'next/router'

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

  return (
    <button onClick={() => router.push('/about')}>
      انقر هنا لقراءة المزيد
    </button>
  )
}

التوجيه السطحي

يسمح التوجيه السطحي بتغيير عنوان URL دون تشغيل طرق جلب البيانات مرة أخرى، وهذا يشمل getServerSideProps، وgetStaticProps، وgetInitialProps.

ستتلقى pathname و query المحدثين عبر كائن الموجه (router) (المضاف بواسطة useRouter أو withRouter)، دون فقدان الحالة.

لتمكين التوجيه السطحي، اضبط خيار shallow على true. ضع في اعتبارك المثال التالي:

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// عنوان URL الحالي هو '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // دائمًا قم بعمليات التنقل بعد التصيير الأول
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // تغير العداد!
  }, [router.query.counter])
}

export default Page

سيتم تحديث عنوان URL إلى /?counter=10 ولن يتم استبدال الصفحة، فقط حالة المسار تتغير.

يمكنك أيضًا مراقبة تغييرات عنوان URL عبر componentDidUpdate كما هو موضح أدناه:

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // تحقق من تغيير الخصائص لتجنب حلقة لا نهائية
  if (query.counter !== prevProps.router.query.counter) {
    // جلب البيانات بناءً على الاستعلام الجديد
  }
}

محاذير

يعمل التوجيه السطحي فقط لتغييرات عنوان URL في الصفحة الحالية. على سبيل المثال، لنفترض أن لدينا صفحة أخرى تسمى pages/about.js، وتقوم بتشغيل هذا:

router.push('/?counter=10', '/about?counter=10', { shallow: true })

نظرًا لأن هذه صفحة جديدة، سيتم تفريغ الصفحة الحالية، وتحميل الصفحة الجديدة وانتظار جلب البيانات حتى لو طلبنا التوجيه السطحي.

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