مسار الصفحة يعتمد على بيانات خارجية

في الدرس السابق، تناولنا الحالة التي يعتمد فيها محتوى الصفحة على بيانات خارجية. استخدمنا getStaticProps لجلب البيانات المطلوبة لعرض صفحة الفهرس.

في هذا الدرس، سنتحدث عن الحالة التي يعتمد فيها مسار كل صفحة على بيانات خارجية. يُتيح لك Next.js إنشاء صفحات بشكل ثابت مع مسارات تعتمد على بيانات خارجية. هذا يمكّن عناوين URL ديناميكية في Next.js.

كيفية إنشاء صفحات بشكل ثابت مع مسارات ديناميكية

في حالتنا، نريد إنشاء مسارات ديناميكية للمقالات:

• نريد أن يكون لكل مقال مسار /posts/<id>، حيث <id> هو اسم ملف markdown ضمن المجلد الرئيسي posts.
• بما أن لدينا ssg-ssr.md و pre-rendering.md، نريد أن تكون المسارات /posts/ssg-ssr و /posts/pre-rendering.

نظرة عامة على الخطوات

يمكننا تحقيق ذلك باتباع الخطوات التالية. لا داعي لإجراء هذه التغييرات الآن - سنقوم بذلك في الصفحة التالية.

أولاً، سنقوم بإنشاء صفحة تسمى [id].js تحت pages/posts. الصفحات التي تبدأ بـ [ وتنتهي بـ ] هي مسارات ديناميكية في Next.js.

في pages/posts/[id].js، سنكتب كودًا يعرض صفحة مقال - تمامًا مثل الصفحات الأخرى التي أنشأناها.

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}

الآن، إليك الجديد: سنصدر دالة غير متزامنة تسمى getStaticPaths من هذه الصفحة. في هذه الدالة، نحتاج إلى إرجاع قائمة بالقيم الممكنة لـ id.

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // إرجاع قائمة بالقيم الممكنة لـ id
}

أخيرًا، نحتاج إلى تنفيذ getStaticProps مرة أخرى - هذه المرة، لجلب البيانات الضرورية للمقال باستخدام id المحدد. يتم تمرير params إلى getStaticProps، والذي يحتوي على id (لأن اسم الملف هو [id].js).

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // إرجاع قائمة بالقيم الممكنة لـ id
}
 
export async function getStaticProps({ params }) {
  // جلب البيانات الضرورية للمقال باستخدام params.id
}

إليك ملخص مرئي لما تحدثنا عنه للتو:

لنجرب هذا في الصفحة التالية!