فایلهای ویژهای که در پوشه app تعریف میشوند، بر اساس یک ساختار درختی و سلسلهمراتب کاملاً مشخص و تودرتو رندر میشوند. این ترتیب قرارگیری به صورت زیر است:
layout.js (بالاترین لایه نگهدارنده)
template.js (پوسته تکرارشونده)
error.js (محدوده محافظ خطاهای رانتایم)
loading.js (محدوده Suspense برای بارگذاری جریانی)
not-found.js (مدیریت خطای ۴۰۴)
page.js یا دایرکتوریهای زیرمجموعه layout.js
در مسیرهای تو در تو (Nested Routes)، این کامپوننتها به صورت بازگشتی (Recursively) رندر میشوند؛ به این معنی که کامپوننتهای یک بخش از آدرس، دقیقاً درون کامپوننتهای بخش والد (پدر) خود تزریق و جاگذاری میشوند.
در ساختار app، پوشههای تو در تو ساختار آدرس سایت (URL) را تعیین میکنند و هر پوشه نشاندهنده یک بخش از مسیر است. اما یک قاعده بسیار مهم وجود دارد:
قانون دسترسی عمومی: صرفاً ساختن یک پوشه، آن را به یک آدرس عمومی و قابل دسترسی در مرورگر تبدیل نمیکند. یک مسیر تنها زمانی به صورت عمومی باز میشود که یک فایل
page.js(برای صفحات) یاroute.js(برای نقاط اتصال API) در آن پوشه ساخته شود.
حتی وقتی یک مسیر عمومی میشود، فقط و فقط خروجی بازگردانده شده توسط فایل page.js یا route.js به سمت مرورگر کاربر (Client) ارسال میشود.
این معماری به شما اجازه میدهد تا با خیال راحت فایلهای پروژه خود (مانند کامپوننتهای فرعی، فایلهای تست، استایلها و ابزارهای کمکی) را در درون خود پوشههای مسیر (Colocation) قرار دهید، بدون اینکه نگران دسترسی ناخواسته کاربران به آنها از طریق آدرس مرورگر باشید.
نکته: ابزار Next.js شما را مجبور به استفاده از این روش نمیکند. اگر ترجیح میدهید، میتوانید تمام فایلهای فرعی پروژه را کاملاً خارج از پوشه
appنگهداری کنید.
شما میتوانید با اضافه کردن پیشوند آندراسکور به نام یک پوشه (مانند _folderName)، یک پوشه خصوصی ایجاد کنید. این علامت به سیستم مسیردهی اعلام میکند که این پوشه و تمام زیرپوشههای آن یک بخش داخلی از منطق برنامه هستند و باید کاملاً از چرخه مسیردهی و آدرسهای وب حذف شوند.
از آنجا که سیستم Next.js به طور پیشفرض امنیت همجواری فایلها را تأمین میکند، استفاده از پوشههای خصوصی برای تفکیک فایلها الزامی نیست؛ اما استفاده از آنها برای اهداف زیر بسیار مفید است:
تفکیک کامل منطق رابط کاربری (UI Logic) از منطق مسیردهی (Routing Logic).
یکپارچهسازی و سازماندهی استاندارد فایلهای داخلی در سراسر پروژه.
مرتبسازی، دستهبندی و دسترسی سریعتر به فایلها در ویرایشگرهای کد (مانند VS Code).
جلوگیری از هرگونه تداخل نامگذاری با قراردادهای فایل ویژه که ممکن است در نسخههای آینده Next.js معرفی شوند.
نکات کاربردی:
اگر تمایل دارید، میتوانید فایلهای خارج از پوشههای خصوصی را نیز با همین الگوی آندراسکور نامگذاری کنید تا در ساختار تیم به عنوان فایل خصوصی شناخته شوند.
اگر نیاز مبرم دارید آدرسی در سایت ایجاد کنید که واقعاً با علامت آندراسکور شروع شود، باید نام پوشه را با عبارت کدگذاریشده
%5FfolderNameبسازید.در صورت عدم استفاده از پوشههای خصوصی، حتماً نام فایلهای ویژه Next.js را به خاطر بسپارید تا کدهای فرعی شما همنام با آنها نشوند و تداخل ایجاد نکنند.
برای ایجاد یک گروه مسیر، کافی است نام پوشه را داخل پرانتز قرار دهید: (folderName). این کار به فریمورک میگوید که این پوشه صرفاً برای نظمدهی و سازماندهی کدهای شماست و نباید نام آن در آدرس اینترنتی (URL) سایت ظاهر شود.
دستهبندی موضوعی: سازماندهی مسیرها بر اساس بخشهای سایت، اهداف توسعه یا تیمهای کاری (مثلاً تفکیک پوشه صفحات بازاریابی (marketing) از پوشه صفحات مدیریت (admin)).
لایههای مشترک تو در تو همسطح: امکان ایجاد چندین لایه ساختاری مشترک (Layout) در یک سطح واحد از مسیر؛ حتی ساخت چندین لایه ریشه (Multiple Root Layouts) مجزا برای بخشهای مختلف سایت.
اعمال لایه به بخش خاص: اضافه کردن یک لایه مشترک (layout.js) به یک زیرمجموعه خاص از صفحات، بدون اینکه بقیه صفحات همسطح تحت تأثیر قرار بگیرند.
src (The src folder)فریمورک Next.js از قرار گرفتن پوشه اصلی برنامه (شامل کل دایرکتوری app) در داخل یک پوشه اختیاری به نام src پشتیبانی میکند.
این ساختار به شما کمک میکند تا تمام کدهای اصلی و اجرایی برنامه را به طور کامل از فایلهای تنظیمات محیطی و پیکربندی پروژه (مانند package.json ، tsconfig.json و فایلهای کانفیگ ابزارها) که همگی در ریشه اصلی پروژه ساکن هستند، جدا کنید و ساختار منظمتری داشته باشید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app