⭐️ ساختار پروژه (Project Structure) در Next.js
🗂️ 1. پوشههای سطح بالا (Top-level folders)
📄 2. فایلهای مهم سطح بالا (Top-level files)
🧭 3. فایلهای روتینگ
🧩 4. مسیرهای تو در تو (Nested Routes)
🔢 5. مسیرهای داینامیک (Dynamic Routes)
🗃️ 6. گروهبندی مسیرها (Route Groups)
🔒 7. پوشههای خصوصی (folder_)
#Nextjs #NextjsAppRouter #ProjectStructure #WebDevelopment #Frontend #ReactJS #JavaScript #WebDev #Coding #Programmer #DevCommunity
#LearnNextJS
Channel | Group | YouTube
🗂️ 1. پوشههای سطح بالا (Top-level folders)
- دایرکتوری app: قلب اپلیکیشن؛ جاییکه مسیرها، صفحات، layout ها و کامپوننتها قرار دارند.
- دایرکتوری pages: روتینگ قدیمی (Pages Router).
- دایرکتوری public: فایلهای استاتیک (تصاویر، آیکونها، و …).
- دایرکتوری src: اختیاری؛ برای جداسازی کد اپلیکیشن از فایلهای پیکربندی.
📄 2. فایلهای مهم سطح بالا (Top-level files)
- فایل next.config.js: تنظیمات Next.js
- فایل package.json: وابستگیها و اسکریپتها
- فایل env. : متغیرهای محیطی
- فایل eslint.config.mjs: پیکربندی ESLint
- فایل tsconfig.json / jsconfig.json: تنظیمات مسیرها و TypeScript/JS
🧭 3. فایلهای روتینگ
در Next.js از فایلهای خاصی برای کنترل UI، رندر و رفتار مسیر استفاده میشه:
- فایل page.js: صفحه قابل دسترسی
- فایل layout.js: لایوت مشترک
- فایل loading.js: اسکلت لودینگ
- فایل error.js: مرتبط به خطاهای اپلیکشن
- فایل not-found.js: برای 404
- فایل route.js: برای API endpoint
🧩 4. مسیرهای تو در تو (Nested Routes)
هر پوشه یک بخش از URL را نشان میدهد.
مثال: app/blog/authors/page.tsx: مسیر blog/authors/
🔢 5. مسیرهای داینامیک (Dynamic Routes)
- مسیر [slug]: پارامتر تک
- مسیر [slug...]: همه مسیرها (catch-all)
- مسیر [[slug...]]: catch-all اختیاری
🗃️ 6. گروهبندی مسیرها (Route Groups)
برای سازماندهی بدون تغییر URL:
app/(marketing)/page.js → URL = /
🔒 7. پوشههای خصوصی (folder_)
پوشههایی که با علامت _ شروع میشوند، وارد روتینگ نمیشوند و برای نگهداری:
- تابعها
- یوآی داخلی
- فایلهای کمکی
#Nextjs #NextjsAppRouter #ProjectStructure #WebDevelopment #Frontend #ReactJS #JavaScript #WebDev #Coding #Programmer #DevCommunity
#LearnNextJS
Channel | Group | YouTube
🔥22👍5❤4❤🔥3👌1