Next.js 15 Fullstack Web Apps · درس

المسارات الديناميكية والمقاطع الشاملة

أنشئ مسارات مرنة تتكيف مع المحتوى الديناميكي باستخدام المقاطع الديناميكية والمسارات الشاملة.

الدرس 1 من 410 خطوة

المسارات الديناميكية والمقاطع الشاملة درس مجاني في Next.js 15 Fullstack Web Apps على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack Web Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Flexible Routing in Next.js

Welcome to dynamic routing in Next.js! Modern web applications often need flexible URLs for content like blog posts, product details, or user profiles.

Instead of creating a separate page for each item, dynamic routes let you use a single page template to handle many different URLs based on their path.

Creating Dynamic Segments

In Next.js, you create a dynamic route by enclosing a folder name in square brackets, like [slug].

This [slug] segment acts as a placeholder. Whatever value is in that part of the URL will be captured and made available to your page component.

Example: app/blog/[slug]/page.js
This will match URLs like /blog/hello-world or /blog/nextjs-tips.

Accessing Dynamic Parameters

When a dynamic route is matched, the value of the dynamic segment (e.g., slug) is passed to your page component as a property of the params object.

By default, Next.js App Router pages are React Server Components, which receive params as a prop.

// File: app/blog/[slug]/page.js

export default function BlogPostPage({ params }) {
  const { slug } = params; // If URL is /blog/my-post, slug will be 'my-post'

  return (
    <main>
      <h1>Blog Post: {decodeURIComponent(slug)}</h1>
      <p>This content is for the post identified by '{decodeURIComponent(slug)}'.</p>
    </main>
  );
}

Introducing Catch-all Segments

What if you need to match URLs with an unknown number of segments? For example, a documentation site where paths can be deeply nested (e.g., /docs/getting-started/installation).

This is where catch-all segments come in. They capture all subsequent path segments into an array.

Creating Catch-all Routes

To create a catch-all route, use three dots followed by the segment name inside square brackets: [...slug].

This will match any path that starts with the parent folder and capture all parts after it into an array.

Example: app/docs/[...slug]/page.js
Matches: /docs/a, /docs/a/b, /docs/a/b/c.
slug will be an array: ['a'], ['a', 'b'], ['a', 'b', 'c'].

Accessing Catch-all Parameters

Similar to dynamic segments, catch-all parameters are available via the params object. However, the value for a catch-all segment is always an array of strings.

Let's see an example of displaying the captured path segments from a URL like /docs/guide/setup/nextjs.

// File: app/docs/[...slug]/page.js

export default function DocsPage({ params }) {
  const { slug } = params; // If URL is /docs/intro/setup, slug is ['intro', 'setup']

  return (
    <main>
      <h2>Documentation Path: /{slug.join('/')}</h2>
      <p>Segments found: {slug.map(s => `<code>${s}</code>`).join(', ')}</p>
    </main>
  );
}

Optional Catch-all Segments

What if you want a catch-all route to also match the base path? For example, you want /docs to show an index page, but /docs/intro to show a specific guide.

You can make a catch-all segment optional by wrapping it in an extra set of square brackets: [[...slug]].

Example: app/docs/[[...slug]]/page.js
Matches: /docs and /docs/a/b.

Optional Catch-all Example

When using [[...slug]], the slug parameter will be an array of strings for sub-paths. However, it will be undefined if only the base path is matched (e.g., /docs).

You'll need to handle the undefined case in your component to show default content.

// File: app/docs/[[...slug]]/page.js

export default function OptionalDocsPage({ params }) {
  const { slug } = params; // If URL is /docs, slug is undefined
                           // If URL is /docs/intro, slug is ['intro']

  const pathDisplay = slug ? slug.join('/') : 'Home Index';

  return (
    <main>
      <h2>Docs: {pathDisplay}</h2>
      <p>This page handles both the base path and any sub-paths.</p>
    </main>
  );
}

Quick Check on Routing

Which of the following statements about Next.js dynamic and catch-all routes are TRUE?

أجب عليها في الدرس التفاعلي

Recap: Dynamic & Catch-all Routes

You've mastered how to make your Next.js application's routing incredibly flexible!

Dynamic Segments ([slug]) allow a single page to handle many specific URLs, receiving a string parameter.
Catch-all Segments ([...slug]) capture multiple path segments into an array, useful for nested structures.
Optional Catch-all Segments ([[...slug]]) extend catch-alls to also match the base path, with the parameter being undefined for the base path.

These powerful patterns are fundamental for building scalable and content-rich applications in Next.js.

البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «المسارات الديناميكية والمقاطع الشاملة» مجاني؟

نعم — نص درس «المسارات الديناميكية والمقاطع الشاملة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack Web Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

ماذا ستتعلم في «المسارات الديناميكية والمقاطع الشاملة»؟

أنشئ مسارات مرنة تتكيف مع المحتوى الديناميكي باستخدام المقاطع الديناميكية والمسارات الشاملة. تتمرن على Next.js 15 Fullstack Web Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack Web Apps؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack Web Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «المسارات الديناميكية والمقاطع الشاملة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack Web Apps هذا؟

نعم. كل درس في Next.js 15 Fullstack Web Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Next.js 15 Fullstack Web Apps