سازماندهی پروژه و هممکانی فایلها
فراتر از قراردادهای پوشه و فایل مسیریابی، Next.js در مورد نحوه سازماندهی و هممکانی فایلهای پروژه شما هیچ نظری ندارد.
این صفحه رفتار پیشفرض و ویژگیهایی را به اشتراک میگذارد که میتوانید برای سازماندهی پروژه خود از آنها استفاده کنید.
هممکانی ایمن به صورت پیشفرض
در پوشه app، سلسله مراتب پوشههای تو در تو، ساختار مسیر را تعریف میکنند.
هر پوشه نشاندهنده یک بخش مسیر است که به بخش متناظر در مسیر URL نگاشت میشود.
با این حال، حتی اگر ساختار مسیر از طریق پوشهها تعریف شود، تا زمانی که یک فایل page.js یا route.js به یک بخش مسیر اضافه نشود، یک مسیر قابل دسترسی عمومی نیست.
و حتی زمانی که یک مسیر به صورت عمومی در دسترس قرار میگیرد، تنها محتوای برگشتی توسط page.js یا route.js به کلاینت ارسال میشود.
این بدان معناست که فایلهای پروژه را میتوان به صورت ایمن در داخل بخشهای مسیر در پوشه app بدون اینکه به طور تصادفی قابل مسیریابی باشند، هممکان کرد.
خوب است بدانید:
- این مورد با پوشه
pagesمتفاوت است، جایی که هر فایلی درpagesیک مسیر در نظر گرفته میشود.- در حالی که میتوانید فایلهای پروژه خود را در
appهممکان کنید، اما مجبور نیستید این کار را انجام دهید. در صورت تمایل میتوانید آنها را خارج از پوشهappنگه دارید.
ویژگیهای سازماندهی پروژه
Next.js چندین ویژگی برای کمک به شما در سازماندهی پروژه شما ارائه میدهد.
پوشههای خصوصی
پوشههای خصوصی را میتوان با پیشوند یک زیرخط به نام پوشه ایجاد کرد: _folderName
این نشان میدهد که پوشه یک جزئیات پیادهسازی خصوصی است و نباید توسط سیستم مسیریابی در نظر گرفته شود، بنابراین پوشه و تمام زیرپوشههای آن را از مسیریابی خارج میکند.
از آنجایی که فایلها در پوشه app به طور پیش فرض میتوانند به طور ایمن هممکان شوند، برای هممکانی نیازی به پوشههای خصوصی نیست. با این حال، آنها میتوانند برای موارد زیر مفید باشند:
- جدا کردن منطق رابط کاربری از منطق مسیریابی.
- سازماندهی مداوم فایلهای داخلی در سراسر پروژه و اکوسیستم Next.js.
- مرتبسازی و گروهبندی فایلها در ویرایشگرهای کد.
- اجتناب از تداخلهای بالقوه نامگذاری با قراردادهای فایلهای آینده Next.js.
خوب است بدانید
- در حالی که یک قرارداد چارچوب نیست، ممکن است بخواهید فایلهای خارج از پوشههای خصوصی را نیز با استفاده از همین الگوی زیرخط به عنوان "خصوصی" علامتگذاری کنید.
- شما میتوانید بخشهای URL را که با یک زیرخط شروع میشوند با پیشوند نام پوشه با
%5F(شکل رمزگذاری شده URL یک زیرخط) ایجاد کنید:%5FfolderName.- If you don't use private folders, it would be helpful to know Next.js to prevent unexpected naming conflicts.
- اگر از پوشههای خصوصی استفاده نمیکنید، دانستن قراردادهای فایل ویژه Next.js برای جلوگیری از تداخلهای غیرمنتظره نام مفید است.
گروههای مسیر
گروههای مسیر را میتوان با قرار دادن یک پوشه در پرانتز ایجاد کرد: (folderName)
این نشان میدهد که پوشه برای اهداف سازماندهی است و نباید در مسیر URL مسیر گنجانده شود.
گروههای مسیر برای موارد زیر مفید هستند:
- سازماندهی مسیرها به گروهها، برای مثال بر اساس بخش سایت، هدف یا تیم.
- فعال کردن چیدمانهای تودرتو در همان سطح بخش مسیر:
دایرکتوری src
Next.js از ذخیره کد برنامه (از جمله app) در یک پوشه اختیاری src directory پشتیبانی میکند. این کد برنامه را از فایلهای پیکربندی پروژه که عمدتاً در ریشه پروژه قرار دارند جدا میکند.
نام مستعار مسیر ماژول Module Path Aliases
Next.js از نام مستعار نام مستعار مسیر ماژول پشتیبانی میکند که خواندن و نگهداری importها در سراسر فایلهای پروژه با تو در تو عمیق را آسانتر میکند.
// before
import { Button } from '../../../components/button'
// after
import { Button } from '@/components/button'استراتژیهای سازماندهی پروژه
هیچ راه "درست" یا "غلطی" برای سازماندهی فایل ها و پوشه های خود در یک پروژه Next.js وجود ندارد.
استراتژیهای سازماندهی پروژه هیچ راه "درست" یا "غلطی" برای سازماندهی فایل ها و پوشه های خود در یک پروژه Next.js وجود ندارد.
بخش زیر نمای کلی بسیار سطح بالایی از استراتژی های رایج را فهرست می کند. ساده ترین نتیجه گیری این است که استراتژی ای را انتخاب کنید که برای شما و تیم شما مناسب است و در کل پروژه به آن پایبند باشید.
خوب است بدانید: در نمونه های زیر، ما از پوشه های
componentsوlibبه عنوان جایگزین های عمومی استفاده می کنیم، نامگذاری آنها اهمیت خاصی در چارچوب ندارد و پروژه های شما ممکن است از پوشه های دیگری مانندui، utils،hooks،stylesو غیره استفاده کنند.
ذخیره فایلهای پروژه خارج از app
این استراتژی تمام کد برنامه را در پوشههای مشترک در ریشه پروژه شما ذخیره میکند و پوشه app را صرفاً برای اهداف مسیریابی نگه میدارد.
ذخیره فایلهای پروژه در پوشههای سطح بالا درون app
این استراتژی تمام کد برنامه را در پوشههای مشترک در ریشه پوشه app ذخیره میکند.
تقسیم فایلهای پروژه بر اساس ویژگی یا مسیر
این استراتژی کد برنامه به اشتراک گذاشته شده جهانی را در پوشه ریشه app ذخیره می کند و کد برنامه خاصتر را به بخشهای مسیری که از آنها استفاده میکنند تقسیم میکند.
