ساختار پوشه‌ها در پروژه‌های Next.js؛ هر فایل چه کاربردی دارد؟
وقتی برای اولین بار وارد یک پروژه Next.js می‌شویم، ممکن است تعداد زیادی پوشه و فایل مختلف ببینیم و ندانیم هرکدام چه کاربردی دارند.
درک ساختار پروژه یکی از اولین چیزهایی است که به ما کمک می‌کند راحت‌تر در یک پروژه Next.js کار کنیم و بدانیم هر فایل را باید کجا قرار دهیم.
در این مقاله با ساختار معمول یک پروژه Next.js آشنا می‌شویم و کاربرد مهم‌ترین پوشه‌ها و فایل‌ها را بررسی می‌کنیم.
ساختار کلی یک پروژه Next.js
یک پروژه معمولی Next.js می‌تواند چیزی شبیه ساختار زیر داشته باشد:
my-next-app/
├── app/
├── public/
├── src/
├── node_modules/
├── .env
├── .gitignore
├── next.config.ts
├── package.json
└── tsconfig.json
البته همه پروژه‌ها دقیقاً چنین ساختاری ندارند و ممکن است بر اساس نیاز پروژه، پوشه‌های دیگری هم به آن اضافه شوند.
پوشه app
یکی از مهم‌ترین پوشه‌ها در پروژه‌های جدید Next.js، پوشه app است.
این پوشه محل قرارگیری صفحات، Layoutها، Loadingها، صفحات خطا و بسیاری از بخش‌های مربوط به Routing پروژه است.
برای مثال:
app/
├── page.tsx
├── about/
│ └── page.tsx
└── products/
└── page.tsx
در این ساختار:
app/page.tsx → صفحه اصلی سایت
app/about/page.tsx → صفحه About
app/products/page.tsx → صفحه Products
ساختار پوشه‌ها در اینجا مستقیماً با مسیرهای سایت ارتباط دارد.
فایل page.tsx
فایل page.tsx برای تعریف یک صفحه استفاده می‌شود.
مثلاً اگر داشته باشیم:
app/
└── about/
└── page.tsx
این فایل صفحه مربوط به مسیر /about را ایجاد می‌کند.
یک نمونه ساده:
export default function AboutPage() {
return (
<main>
<h1>درباره ما</h1>
<p>به وب‌سایت ما خوش آمدید.</p>
</main>
);
}
فایل layout.tsx
layout.tsx برای بخش‌هایی استفاده می‌شود که قرار است بین چند صفحه مشترک باشند.
برای مثال Header و Footer معمولاً می‌توانند در یک Layout قرار بگیرند.
app/
├── layout.tsx
├── page.tsx
└── about/
└── page.tsx
Layout اصلی می‌تواند ساختاری شبیه این داشته باشد:
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="fa" dir="rtl">
<body>
<header>Header</header>
{children}
<footer>Footer</footer>
</body>
</html>
);
}
مزیت این کار این است که لازم نیست Header و Footer را در تک‌تک صفحات دوباره بنویسیم.
فایل loading.tsx
گاهی اوقات دریافت اطلاعات از سرور کمی زمان می‌برد و نمی‌خواهیم کاربر در این مدت با یک صفحه خالی مواجه شود.
در این شرایط می‌توانیم از loading.tsx استفاده کنیم.
مثلاً:
app/
└── products/
├── page.tsx
└── loading.tsx
فایل loading.tsx می‌تواند یک Loading UI یا Skeleton نمایش دهد تا محتوای اصلی آماده شود.
فایل error.tsx
در هر پروژه‌ای ممکن است خطا اتفاق بیفتد.
Next.js امکان ایجاد یک رابط کاربری مخصوص برای نمایش خطا را با error.tsx فراهم می‌کند.
مثلاً:
app/
└── products/
├── page.tsx
└── error.tsx
در این فایل می‌توانیم پیام مناسبی به کاربر نمایش دهیم و حتی گزینه‌ای برای تلاش مجدد در اختیار او قرار دهیم.
فایل not-found.tsx
اگر کاربر وارد صفحه‌ای شود که وجود ندارد، می‌توانیم با استفاده از not-found.tsx یک صفحه 404 اختصاصی ایجاد کنیم.
مثلاً:
app/
├── page.tsx
└── not-found.tsx
این فایل می‌تواند صفحه‌ای مانند «صفحه موردنظر پیدا نشد» را نمایش دهد.
Dynamic Routes
یکی از قابلیت‌های کاربردی Next.js، ساخت صفحات داینامیک است.
فرض کنید یک فروشگاه داریم و می‌خواهیم برای هر محصول یک صفحه جدا داشته باشیم.
می‌توانیم ساختاری مثل این داشته باشیم:
app/
└── products/
└── [id]/
└── page.tsx
در این حالت [id] یک مقدار داینامیک است.
برای مثال:
/products/1
/products/2
/products/25
همگی می‌توانند از همین ساختار استفاده کنند و اطلاعات محصول مربوط به همان id را نمایش دهند.
پوشه public
پوشه public معمولاً برای فایل‌های استاتیک پروژه استفاده می‌شود.
برای مثال:
public/
├── logo.png
├── images/
│ └── product.jpg
└── favicon.ico
فایل‌هایی که در public قرار می‌گیرند می‌توانند مستقیماً از مسیر سایت مورد استفاده قرار بگیرند.
مثلاً:
<img src="/logo.png" alt="Logo" />
پوشه src
استفاده از src در پروژه‌های Next.js اختیاری است، اما بسیاری از پروژه‌ها برای مرتب‌تر شدن ساختار از آن استفاده می‌کنند.
برای مثال:
src/
├── app/
├── components/
├── lib/
└── types/
در این حالت کد اصلی پروژه داخل src قرار می‌گیرد.
پوشه components
این پوشه معمولاً برای کامپوننت‌های قابل استفاده مجدد استفاده می‌شود.
برای مثال:
components/
├── Button.tsx
├── Navbar.tsx
├── Footer.tsx
└── ProductCard.tsx
اگر یک ProductCard در چند صفحه استفاده شود، می‌توانیم آن را یک بار ایجاد کنیم و در قسمت‌های مختلف پروژه استفاده کنیم.
پوشه lib
پوشه lib معمولاً برای کدهای کمکی و منطق‌هایی استفاده می‌شود که مستقیماً مربوط به UI نیستند.
برای مثال:
lib/
├── api.ts
├── utils.ts
└── db.ts
البته ساختار دقیق این پوشه به معماری و نیازهای پروژه بستگی دارد.
فایل package.json
این فایل یکی از فایل‌های اصلی هر پروژه JavaScript یا Next.js است.
در package.json اطلاعاتی مانند:
نام پروژه
اسکریپت‌های پروژه
وابستگی‌ها
نسخه پکیج‌ها
قرار می‌گیرد.
برای مثال ممکن است در آن چیزی شبیه این ببینیم:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}
به همین دلیل وقتی دستور زیر را اجرا می‌کنیم:
npm run dev
در واقع یکی از Scriptهای تعریف‌شده در package.json اجرا می‌شود.
فایل next.config.ts
این فایل برای تنظیمات مربوط به Next.js استفاده می‌شود.
برای مثال ممکن است تنظیمات مربوط به تصاویر، Redirectها یا قابلیت‌های مختلف Next.js در این فایل قرار بگیرند.
لازم نیست در همه پروژه‌ها تنظیمات زیادی در این فایل وجود داشته باشد.
فایل .env
اطلاعاتی که نباید مستقیماً داخل کد قرار بگیرند، معمولاً در فایل‌های Environment Variable نگهداری می‌شوند.
برای مثال:
DATABASE_URL=...
API_KEY=...
این فایل معمولاً نباید در Git عمومی قرار بگیرد؛ به همین دلیل اغلب در .gitignore قرار داده می‌شود.
فایل tsconfig.json
اگر پروژه با TypeScript ساخته شده باشد، tsconfig.json تنظیمات TypeScript پروژه را مشخص می‌کند.
برای مثال می‌تواند مشخص کند:
کد TypeScript چگونه بررسی شود
مسیرهای Import چگونه مدیریت شوند
چه تنظیماتی برای Compiler استفاده شود
فایل .gitignore
این فایل مشخص می‌کند چه فایل‌ها و پوشه‌هایی نباید توسط Git دنبال شوند.
برای مثال معمولاً مواردی مانند:
node_modules/
.next/
.env
در این فایل قرار می‌گیرند.
یک ساختار پیشنهادی برای پروژه
با کنار هم قرار دادن مواردی که بررسی کردیم، می‌توانیم یک پروژه را به شکل زیر سازمان‌دهی کنیم:
my-next-app/
├── src/
│ ├── app/
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ ├── about/
│ │ │ └── page.tsx
│ │ └── products/
│ │ ├── page.tsx
│ │ └── [id]/
│ │ └── page.tsx
│ │
│ ├── components/
│ │ ├── Navbar.tsx
│ │ ├── Footer.tsx
│ │ └── ProductCard.tsx
│ │
│ ├── lib/
│ │ └── api.ts
│ │
│ └── types/
│ └── product.ts
│
├── public/
│ └── images/
│
├── .env
├── .gitignore
├── next.config.ts
├── package.json
└── tsconfig.json
این فقط یک نمونه است و قرار نیست تمام پروژه‌های Next.js دقیقاً همین ساختار را داشته باشند.
جمع‌بندی
شناخت ساختار پروژه یکی از اولین قدم‌ها برای کار راحت‌تر با Next.js است.
مهم‌ترین مواردی که باید به خاطر داشته باشیم عبارت‌اند از:
app → صفحات و ساختار اصلی Routing
page.tsx → تعریف یک صفحه
layout.tsx → بخش‌های مشترک صفحات
loading.tsx → رابط کاربری زمان Loading
error.tsx → مدیریت رابط کاربری خطا
not-found.tsx → صفحه 404
[id] → مسیر داینامیک
public → فایل‌های استاتیک
components → کامپوننت‌های قابل استفاده مجدد
lib → توابع و منطق‌های کمکی
package.json → وابستگی‌ها و Scriptهای پروژه
next.config.ts → تنظیمات Next.js
.env → متغیرهای محیطی
tsconfig.json → تنظیمات TypeScript
وقتی کاربرد این فایل‌ها و پوشه‌ها را بدانیم، وارد شدن به یک پروژه Next.js جدید دیگر چندان گیج‌کننده نخواهد بود و راحت‌تر می‌توانیم محل مناسب برای قرار دادن هر بخش از کد را پیدا کنیم.