Back to Glossary

Dynamic Route

المسار الديناميكي

GLS-000084

Beginnerreact-nextjs1 min read
dynamic routing[slug][id]catch all routedynamic segmentroute params
Official DocsSign in to save & take notes

Definition

A Next.js route that matches a variable URL segment — like /glossary/[slug] matching any term.

مسار Next.js يطابق جزءًا متغيرًا من URL — مثل /glossary/[slug] الذي يطابق أي مصطلح.

Why It Matters

Every glossary term page, project page, and prompt page on 404Fault uses a dynamic route. Without it, you'd need to create a separate file for each page.

كل صفحة مصطلح في الغلوساري وصفحة مشروع وصفحة برومبت في 404Fault تستخدم مسارًا ديناميكيًا. بدونه، ستحتاج إلى إنشاء ملف منفصل لكل صفحة.

Full Definition

Dynamic Routes in Next.js use square brackets to define variable URL segments. The file app/glossary/[slug]/page.tsx matches /glossary/nextjs, /glossary/react, /glossary/any-term. The slug value is available inside the component via the params prop. generateStaticParams() can be used to pre-render all dynamic routes at build time.
المسارات الديناميكية في Next.js تستخدم الأقواس المربعة لتعريف أجزاء URL المتغيرة. الملف app/glossary/[slug]/page.tsx يطابق /glossary/nextjs و/glossary/react وأي مصطلح آخر. قيمة slug متاحة داخل المكوّن عبر prop الـ params. يمكن استخدام generateStaticParams() لإنشاء مسبق لجميع المسارات الديناميكية في وقت البناء.

Example Usage

“app/glossary/[slug]/page.tsx receives params.slug = 'nextjs' when the user visits /glossary/nextjs.”

“app/glossary/[slug]/page.tsx يستقبل params.slug = 'nextjs' عندما يزور المستخدم /glossary/nextjs.”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Dynamic Route:

1

Forgetting to await params in Next.js 15 (params is now a Promise)

2

Not handling the case where a slug doesn't exist — always call notFound()

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Dynamic Route.

Explain:
1. What is Dynamic Route and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Forgetting to await params in Next.js 15 (params is now a Promise), Not handling the case where a slug doesn't exist — always call notFound()
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account