سازمان‌دهی مسیرها و فایل‌ها در Next.js – پوشه‌های خصوصی، گروه‌های مسیر و ساختار پروژه

Next.js امکانات متنوعی برای سازمان‌دهی فایل‌ها و مسیرها ارائه می‌دهد. در این مقاله، با مفهوم پوشه‌های خصوصی برای جداسازی منطق داخلی، گروه‌های مسیر برای سازمان‌دهی بدون تأثیر در URL، و استراتژی‌های مختلف ساختار پروژه آشنا می‌شویم. این تکنیک‌ها باعث افزایش خوانایی، مقیاس‌پذیری و انعطاف‌پذیری در توسعه اپلیکیشن می‌شوند.

private foldersroute groupsproject structureNext.js routing

~2 دقیقه مطالعه · آخرین به‌روزرسانی ۳ آبان ۱۴۰۴

پوشه‌های خصوصی در Next.js


برای ایجاد پوشه‌های خصوصی، کافی است نام پوشه را با علامت زیرخط (_) شروع کنید. این پوشه‌ها و زیرپوشه‌هایشان از سیستم مسیریابی Next.js خارج می‌شوند و به‌عنوان جزئیات داخلی در نظر گرفته می‌شوند:


app/blog/_components/Post.tsx  
app/blog/_lib/data.ts

اگرچه Next.js به‌طور پیش‌فرض اجازهٔ colocation امن فایل‌ها را در پوشه app می‌دهد، استفاده از پوشه‌های خصوصی مزایای زیر را دارد:


  • جداسازی منطق UI از منطق مسیریابی
  • سازمان‌دهی منسجم فایل‌های داخلی در پروژه
  • مرتب‌سازی بهتر در ویرایشگر کد
  • جلوگیری از تداخل نام با کنوانسیون‌های آیندهٔ Next.js

گروه‌های مسیر (Route Groups)


برای سازمان‌دهی مسیرها بدون تأثیر در URL، می‌توان پوشه‌ها را داخل پرانتز قرار داد. این پوشه‌ها در مسیر URL نمایش داده نمی‌شوند:


app/(marketing)/page.tsx → /  
app/(shop)/cart/page.tsx → /cart

مزایای استفاده از گروه‌های مسیر:


  • سازمان‌دهی مسیرها بر اساس بخش‌های سایت یا تیم‌ها
  • ایجاد لایه‌های تو در تو در یک سطح مسیر
  • افزودن لایه به زیرمجموعه‌ای از مسیرها

استفاده از پوشه src


Next.js اجازه می‌دهد کدهای اپلیکیشن (از جمله app) را داخل پوشهٔ اختیاری src قرار دهید. این کار باعث جداسازی کد اپلیکیشن از فایل‌های پیکربندی پروژه می‌شود:


src/app/page.tsx  
src/components/Button.tsx

استراتژی‌های ساختار پروژه


در ادامه چند روش رایج برای سازمان‌دهی فایل‌ها در پروژه‌های Next.js معرفی می‌شود:


  • ذخیره فایل‌ها خارج از app: مسیرهای عمومی در app و کدهای اشتراکی در ریشه پروژه
  • ذخیره فایل‌ها داخل app: همهٔ فایل‌ها در پوشه‌های سطح بالای app
  • تقسیم فایل‌ها بر اساس ویژگی یا مسیر: کدهای عمومی در ریشه app و کدهای خاص در پوشه‌های مسیر مربوطه

نمونه‌هایی از گروه‌بندی و لایه‌بندی


  • گروه‌بندی مسیرها بدون تغییر URL: استفاده از پوشه‌هایی مانند (marketing) یا (shop)
  • ایجاد چند لایهٔ ریشه: حذف layout.js سطح بالا و افزودن layout.js در هر گروه مسیر
  • اعمال لایه فقط به مسیرهای خاص: انتقال مسیرهایی مانند account و cart به گروه (shop)
  • اعمال skeleton بارگذاری فقط به یک مسیر: قرار دادن loading.tsx در گروه مسیر (overview)

جمع‌بندی


با استفاده از پوشه‌های خصوصی، گروه‌های مسیر و ساختارهای منعطف، می‌توان پروژه‌های Next.js را به‌صورت منظم، قابل نگهداری و مقیاس‌پذیر سازمان‌دهی کرد. این روش‌ها به توسعه‌دهندگان کمک می‌کنند تا منطق مسیریابی، رابط کاربری و فایل‌های داخلی را به‌درستی از هم جدا کرده و تجربهٔ توسعه را بهبود بخشند.


نوشته و پژوهش‌شده توسط دکتر شاهین صیامی

مقالات مرتبط

مسیریابی پیشرفته و هوک‌های عملکرد در Next.js — راهنمای توسعه‌دهنده برای App Router

Next.js مجموعه‌ای غنی از هوک‌های کلاینت و ابزارهای کش و ناوبری را در اختیار توسعه‌دهندگان قرار می‌دهد. از خواندن پارامترهای مسیر تا گزارش Web Vitals و مدیریت کش، این مقاله مهم‌ترین ابزارهای App Router را با مثال‌های کاربردی معرفی می‌کند.

ادامه

مدیریت احراز هویت و کش در Next.js — راهنمای توسعه‌دهنده برای امنیت و عملکرد پویا

Next.js با معرفی قابلیت‌های آزمایشی جدید، امکان کنترل دقیق‌تر دسترسی و کش داده‌ها را فراهم کرده است. تابع unauthorized برای مدیریت خطای 401 و هدایت کاربران به صفحه ورود، unstable_cache برای کش هوشمند عملیات سنگین، updateTag برای بازسازی آنی داده‌ها، و useLinkStatus برای نمایش وضعیت ناوبری استفاده می‌شوند. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات مهم بررسی می‌کند.

ادامه

redirect و refresh در Next.js — ریدایرکت‌های هوشمند و تازه‌سازی مسیر در Server Actions

تابع redirect در Next.js برای هدایت کاربر به مسیر جدید استفاده می‌شود و بسته به نوع استفاده، پاسخ HTTP با وضعیت 307 یا 303 ارسال می‌کند. این تابع در Server Components، Client Components، Route Handlers و Server Actions قابل استفاده است. تابع refresh نیز برای تازه‌سازی مسیر کلاینت از درون Server Action استفاده می‌شود. این مقاله نحوه استفاده از هر دو تابع را با مثال‌های کاربردی و نکات مهم توضیح می‌دهد.

ادامه

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

ادامه

headers، ImageResponse، notFound و permanentRedirect در Next.js — مدیریت درخواست‌ها، تولید تصویر، خطا و ریدایرکت

Next.js ابزارهای قدرتمندی برای مدیریت درخواست‌ها و پاسخ‌ها در کامپوننت‌های سروری فراهم کرده است. تابع headers برای خواندن هدرهای HTTP ورودی، ImageResponse برای تولید تصاویر داینامیک، notFound برای نمایش صفحه خطای 404، و permanentRedirect برای ریدایرکت دائمی کاربران استفاده می‌شوند. این مقاله نحوه استفاده از هر یک را با مثال‌های کاربردی توضیح می‌دهد.

ادامه

راهنمای کامل استفاده از metadata و generateMetadata در Next.js

در نسخه‌های مدرن Next.js، مدیریت metadata صفحات بسیار قدرتمندتر و ساده‌تر شده است. metadata به‌صورت خودکار در تگ <head> صفحات تزریق می‌شود و نقش مهمی در SEO، اشتراک‌گذاری اجتماعی و تجربه کاربری دارد. این مقاله دو روش اصلی تعریف metadata را بررسی می‌کند: استفاده از آبجکت ثابت metadata و تابع داینامیک generateMetadata.

ادامه