Next.js/Routing

توجيه المسارات في Next.js

تمتلك موجهًا للمسارات يعتمد على نظام ملفات مبني على مفهوم الصفحات. فعندما يُضاف ملف إلى المجلد pages سيُتاح مباشرة كوجهة (أو مسار). يمكن استخدام الملفات ضمن هذا المجلد لتعريف مختلف الأنماط.

أنماط الوجهات في Next.js

تدعم Next.js عددًا من أنماط الوجهات سنتعرف عليها تاليًا.

الوجهات الخاصة بالصفحة Index

سيحدد الموّجه تلقائيًا موقع الصفحات التي تُدعى index بالنسبة إلى الملف الجذري كما في الأمثلة التالية:

pages/index.js → /

pages/blog/index.js → /blog

الوجهات المتداخلة

يدعم الموّجه الملفات المتداخلة، فلو أنشأت هيكلية متداخلة لمجلد سيحدد الموّجه تلقائيًا موقع كل منها بنفس الطريقة السابقة:

pages/blog/first-post.js → /blog/first-post

pages/dashboard/settings/username.js → /dashboard/settings/username

الأقسام الديناميكية لوجهة

لمطابقة جزء ديناميكي من مسار بإمكانك استخدام صيغة الأقواس المربعة، وسيتيح لك ذلك مطابقة معاملات مسماة:

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)

pages/[username]/settings.js → /:username/settings (/foo/settings)

pages/post/[...all].js → /post/* (/post/2020/id/title)

وسنتعرف أكثر على الوجهات الديناميكة تاليًا في صفحة التوثيق هذه.

الربط ما بين الصفحات في Next.js

يتح لك موجّه Next.js الانتقال بين الصفحات في جانب العميل بشكل مشابهٍ للتطبيقات وحيدة الصفحة. يُستخدم مكوّن React الذي يُدعى Link في إنجاز هذا الأمر من جانب العميل:

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

يستخدم المثال السابق روابط عدة يتعلق كل منها بمسار (href) إلى صفحة معروفة:

`/` → `pages/index.js`

`/about` → `pages/about.js`

`/blog/hello-world` → `pages/blog/[slug].js`

إن كل مكوّن </ Link> في نافذة العرض (بشكلها الأساسي أو بعد تمرير محتويات الشاشة) سيُحضَر مسبقًا بشكل افتراضي (بما في ذلك البيانات المتعلقة به) للصفحات باستخدام التوليد الساكن Static Generation. ولن تُحضر البيانات الناتجة عن تصيير الوجهات من جانب الخادم server-rendered بشكل مسبق.

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

يمكن استخدام الاستدلال لإنشاء مسار، وتظهر الفائدة من ذلك عندما يتضمن عنوان المسار أجزاءً ديناميكة. فلو أردت أن تعرض على سبيل المثال مجموعة من المنشورات التي مُرِّرت إلى المكوّن على شكل خاصية:

import Link from 'next/link'

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

export default Posts

ملاحظة: استُخدم الكائن encodeURIComponent في المثال السابق للمحافظة على توافق المسار مع utf-8.

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 },
            }}
          >
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

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

• pathname: هو اسم الصفحة الموجودة في المجلد pages، وهيblog/[slug]/ في مثالنا.
• query: وهو كائن يحتوي على جزء ديناميكي، وهو slug في حالتنا.

الدفع بالموجّه

للوصول إلى الكائن في مكوّن React، يمكنك استخدام useRouter أو withRouter علمًا أنه من الأفضل استخدام useRouter عمومًا.

الوجهات الديناميكية في Next.js

لا يُعد تحديد المسارات مسبقًا أمرًا كافيًا للتطبيقات المعقدة، لهذا تتيح لك إمكانية إضافة أقواس مربعة حول صفحة ([param]) لإنشاء وجهة ديناميكة.

لنتأمل الصفحة التالية pages/post/[pid].js:

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post