اصول مسیریابی

اسکلت هر برنامه مسیریابی است. این بخش شما را با مفاهیم اساسی مسیریابی برای وب و نحوه هندل کردن مسیریابی در Next.js آشنا می کند.

اصطلاحات

ابتدا، خواهید دید که این اصطلاحات در سراسر مستندات استفاده می شوند. در اینجا یک مرجع سریع وجود دارد:

• درخت Tree : قراردادی برای تجسم یک ساختار سلسله مراتبی. به عنوان مثال، یک درخت مؤلفه
• زیردرخت Subtree : بخشی از درخت که از یک ریشه جدید شروع می شود (اول) و به برگ ها (آخرین) ختم می شود.
• ریشه Root : اولین گره در یک درخت یا زیردرخت، مانند یک طرح ریشه.
• برگ Leaf : گره‌هایی در یک زیردرخت که فرزندی ندارند، مانند آخرین بخش در مسیر URL.

• URL Segment: بخشی از مسیر URL که با خطوط اسلش مشخص شده است.
• URL Path: بخشی از URL که بعد از دامنه می آید (متشکل از بخش ها).

روتر برنامه app Router

در نسخه ۱۳، Next.js مسیریاب جدیدی به نام app را معرفی کرد که بر اساس کامپوننت‌های سرور React ساخته شده است. این مسیریاب از طرح بندی های اشتراکی، مسیریابی تودرتو، حالات بارگذاری، مدیریت خطا و موارد دیگر پشتیبانی می‌کند.

مسیریاب app در یک پوشه جدید به نام app کار می‌کند. پوشه app در کنار پوشه pages (صفحات) قرار می‌گیرد تا امکان پذیرش تدریجی ویژگی‌های جدید را فراهم کند. این به شما این امکان را می‌دهد که برخی از مسیرهای برنامه خود را با رفتار جدید در پوشه app و سایر مسیرها را با رفتار قبلی در پوشه pages نگه دارید. اگر برنامه شما از پوشه pages استفاده می‌کند، لطفاً به مستندات مسیریاب صفحات Pages Router نیز مراجعه کنید.

خوب است بدانید : مسیریاب app نسبت به مسیریاب صفحات اولویت دارد. مسیرهایی که در پوشه‌های مختلف تعریف می‌شوند نباید آدرس URL یکسانی داشته باشند. در صورت وجود چنین تداخلی، خطایی در زمان ساخت پروژه رخ می‌دهد تا از این مشکل جلوگیری شود.

نکته: در این مستندات ما فقط بخش های مربوط به مسیریاب برنامه (App Router) رو آموزش میدیم، چرا که هدف ما آموزش Next.js نسخه +13 به بعد هست.

به طور پیش‌فرض، کامپوننت های درون دایرکتوری app از نوع React Server Components هستند. (کامپوننت های React Server Components در ری اکت 18 معرفی شدند) این یک بهینه‌سازی عملکردی است و به شما اجازه می‌دهد که به راحتی از آن‌ها استفاده کنید، همچنین می‌توانید از Client Components نیز استفاده کنید.

سرور کامپوننت یک مفهوم جدید است که در React 18 معرفی شده و توسط نسخه Next.js 13 در پوشه app پذیرفته شده است.

پیشنهاد: اگر تازه وارد Server Components شده‌اید، صفحه سرور را بررسی کنید.

نقش پوشه‌ها و فایل‌ها

Next.js از یک مسیریاب مبتنی بر سیستم فایل استفاده می‌کند که در آن:

• پوشه ها برای تعریف مسیرها (Routes) استفاده می شوند. یک مسیر واحد (Single Route) از پوشه های تو در تو است که فایل سیستم دنبال می کند سلسله مراتب آن را از پوشه ریشه (root) تا برگ نهایی (final Leaf) که شامل فایل page.js است. به تعریف مسیرها مراجعه کنید.
• از فایل ها برای ایجاد رابط کاربری استفاده می شود، که برای یک بخش مسیر (route segment) نشان داده می شود. فایل های ویژه را ببینید.

بخش های مسیر Route Segments

هر پوشه در یک مسیر (route) نشان دهنده یک بخش مسیر (route segment) است. هر بخش مسیر مپ می شود به یک بخش مربوطه در یک مسیر URL (URL path).

مسیرهای تو در تو Nested Routes

برای ایجاد یک مسیر تو در تو، می‌توانید پوشه‌ها را درون یکدیگر قرار دهید. به عنوان مثال، با ایجاد دو پوشه جدید در پوشه app می‌توانید مسیر جدیدی به نام /dashboard/settings اضافه کنید.

مسیر /dashboard/settings از سه بخش تشکیل شده است:

• / (Root segment)
• dashboard (Segment)
• settings (Leaf segment)

قراردادهای فایل

Next.js مجموعه ای از فایل های ویژه را برای ایجاد رابط کاربری با رفتار خاص در مسیرهای تودرتو فراهم می کند:

خوب است بدانید : پسوندهای فایل .js, .jsx, or .tsx را می توان برای فایل ها استفاده کرد.

سلسله مراتب کامپوننت ها Component Hierarchy

کامپوننت‌های React که در فایل‌های ویژه یک بخش مسیر تعریف شده‌اند، به ترتیب خاصی رندر می‌شوند:

• layout.js
• template.js
• error.js (React error boundary)
• loading.js (React suspense boundary)
• not-found.js (React error boundary)
• page.js or nested layout.js

در یک مسیر تودرتو (nested route)، کامپوننت های یک بخش (segment) در داخل کامپوننت های بخش والد (parent segment) آن قرار می گیرند.

هم‌مکانی Colocation

علاوه بر فایل‌های خاص، می‌توانید فایل‌های خود (مانند کامپوننت ها، استایل‌ها، تست ها و غیره) را در پوشه‌ها در دایرکتوری app قرار دهید.

این به این دلیل است که در حالی که پوشه‌ها مسیرها را تعریف می‌کنند، فقط محتوای بازگردانده شده توسط page.js یا route.js به‌ صورت عمومی قابل آدرس‌دهی هستند.

در این باره بیشتر بدانید : سازماندهی پروژه و هم‌مکانی فایل.

الگوهای مسیریابی پیشرفته

Router همچنین مجموعه ای از قراردادها را برای کمک به پیاده سازی الگوهای مسیریابی پیشرفته تر ارائه می دهد. این شامل:

• مسیرهای موازی Parallel Routes : به شما این امکان را می دهد که به طور همزمان دو یا چند صفحه را در یک نمای مشابه نشان دهید که می توان آنها را به طور مستقل پیمایش کرد. می توانید از آنها برای نماهای تقسیم شده استفاده کنید که پیمایش فرعی خود را دارند. به عنوان مثال. داشبوردها
• رهگیری مسیرها Intercepting Routes : به شما امکان می دهد جلوی یک مسیر را بگیرید و آن را در چارچوب (context) مسیر دیگری نشان دهید. شما می توانید از این موارد استفاده کنید جایی که حفظ چارچوب (context) صفحه فعلی مهم است. به عنوان مثال. مشاهده همه کارها، در حین ویرایش یک کار یا بزرگ کردن یک عکس در فید.

این الگوها به شما امکان می دهند رابط های کاربری غنی تر و پیچیده تری بسازید و ویژگی هایی را که به طور سنتی برای تیم های کوچک و توسعه دهندگان فردی پیاده سازی آنها پیچیده بود، در دسترس عموم قرار می دهد.

مراحل بعدی

اکنون که اصول مسیریابی در Next.js را درک کردید، برای ایجاد اولین مسیرهای خود لینک های زیر را دنبال کنید: