مدیریت Routeهای داینامیک در Next.js | ساخت ساختار حرفه‌ای appRoutes و adminRoutes

در پروژه‌های واقعی Next.js، مدیریت مسیرها (Routes) به صورت ثابت کافی نیست. وقتی با بخش‌هایی مثل دوره‌ها، درس‌ها، کاربران یا بلاگ‌ها کار می‌کنیم، نیاز داریم URLها به صورت داینامیک ساخته شوند. در این مقاله یاد می‌گیریم چطور یک ساختار حرفه‌ای برای مدیریت مسیرها بسازیم.

 چرا باید Routeها را متمرکز کنیم؟

اگر مسیرها در چندین فایل پراکنده باشند، پروژه خیلی سریع غیرقابل نگهداری می‌شود. بهترین روش این است که همه مسیرها را در یک فایل مثل routes.ts مدیریت کنیم.

• جلوگیری از تکرار مسیرها
• مدیریت آسان تغییرات
• کاهش خطا در لینک‌دهی
• مقیاس‌پذیری بالا

 ساختار استاندارد appRoutes

در بخش عمومی سایت (Frontend) معمولاً از یک ساختار ساده استفاده می‌کنیم:

export const appRoutes = {
  root: "/",
  login: "/login",
  aboutUs: "/about-me",
  blogList: "/blog",
  courseList: "/courses",
  courseDetail: (slug: string) => `/courses/${slug}`,
  lessonDetail: (slug: string) => `/courses/lesson/${slug}`,
  contactUs: "/contact-me",
};

مثال استفاده:

const url = appRoutes.courseDetail("nextjs-advanced");

"/courses/nextjs-advanced"

این روش باعث می‌شود دیگر نیازی به نوشتن دستی URLها نداشته باشیم.

 مسیرهای داینامیک در Admin Panel

در پنل مدیریت معمولاً مسیرها پیچیده‌تر هستند و شامل چند سطح داینامیک می‌شوند. مانند مدیریت کاربران، دوره‌ها، درس‌ها و تیکت‌ها.

export const adminRoutes = {
  dashboard: "/dashboard",

  users: {
    usersList: "/dashboard/users",
    usersCreate: "/dashboard/users/new",
    usersEdit: (id: string) => `/dashboard/users/edit/${id}`,
  },

  blogs: {
    blogsList: "/dashboard/posts",
    blogsCreate: "/dashboard/posts/new",
    blogsEdit: (id: string) => `/dashboard/posts/edit/${id}`,
  },

  tickets: {
    ticketsList: "/dashboard/tickets",
    ticketsView: (id: number) => `/dashboard/tickets/${id}`,
  },
};

مثال واقعی:

const editUrl = adminRoutes.users.usersEdit("42");

"/dashboard/users/edit/42"

 مسیرهای چندمرحله‌ای (Nested Dynamic Routes)

در پروژه‌های آموزشی (مثل LMS)، معمولاً مسیرها چند سطح دارند:

/dashboard/courses/:courseId/sections/:sectionId/lessons/:lessonId

مثال در کد:

createLessonWithSection: (courseId: string, sectionId: string) =>
  `/dashboard/courses/${courseId}/lessons/new?sectionId=${sectionId}`

استفاده:

const url = adminRoutes.courses.createLessonWithSection("10", "5");

"/dashboard/courses/10/lessons/new?sectionId=5"

 بهترین Practiceها برای Route Management

• تمام مسیرها را در یک فایل مرکزی نگه دارید.
• برای مسیرهای داینامیک از Function استفاده کنید.
• از Stringهای خام (Hardcoded) داخل کامپوننت‌ها استفاده نکنید.
• نام‌گذاری مسیرها را واضح و یکپارچه انجام دهید.
• برای هر ماژول از Nested Object استفاده کنید.

جمع‌بندی

استفاده از ساختار مرکزی برای مسیرهای Next.js باعث می‌شود پروژه شما تمیزتر، قابل توسعه‌تر و حرفه‌ای‌تر شود. مخصوصاً در پروژه‌های بزرگ مانند پنل‌های مدیریتی، سیستم‌های آموزشی (LMS) و فروشگاه‌های اینترنتی، این روش نگهداری مسیرها را ساده‌تر کرده و احتمال بروز خطا را به حداقل می‌رساند.