# اشتباهات رایج توسعه‌دهندگان هنگام شروع کار با Next.js
شروع کار با Next.js برای کسی که با React آشناست معمولاً راحت است، اما بعضی تفاوت‌های Next.js می‌توانند در ابتدا باعث سردرگمی شوند. شناخت اشتباهات رایج می‌تواند مسیر یادگیری را ساده‌تر کند.
## ۱. استفاده بیش از حد از use client
یکی از اشتباهات رایج این است که توسعه‌دهنده برای اکثر کامپوننت‌ها "use client" قرار می‌دهد.
در Next.js، کامپوننت‌ها به‌صورت پیش‌فرض Server Component هستند. بنابراین بهتر است فقط زمانی از "use client" استفاده کنیم که واقعاً به قابلیت‌هایی مثل useState، useEffect یا رویدادهایی مانند onClick نیاز داشته باشیم.
```tsx
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}
```
## ۲. استفاده از روش‌های قدیمی React بدون توجه به امکانات Next.js
Next.js فقط یک React معمولی نیست و امکانات مختلفی برای Routing، Rendering، مدیریت Metadata و موارد دیگر دارد.
برای مثال در App Router، به جای اینکه برای Routing حتماً از کتابخانه جداگانه استفاده کنیم، می‌توانیم ساختار مسیرها را با پوشه‌ها و فایل‌های page.tsx ایجاد کنیم.
```text
app/
├── page.tsx
├── about/
│ └── page.tsx
└── products/
└── page.tsx
```
## ۳. قرار دادن همه چیز داخل یک کامپوننت
در پروژه‌های کوچک شاید قرار دادن تمام کد داخل یک فایل مشکلی ایجاد نکند، اما با بزرگ‌تر شدن پروژه مدیریت آن سخت می‌شود.
بهتر است بخش‌های قابل استفاده مجدد را به کامپوننت‌های جدا تقسیم کنیم:
```text
components/
├── Navbar.tsx
├── Footer.tsx
├── Button.tsx
└── ProductCard.tsx
```
این کار باعث می‌شود کد خواناتر و نگهداری پروژه ساده‌تر شود.
## ۴. نادیده گرفتن ساختار پوشه‌ها
داشتن ساختار مرتب از همان ابتدای پروژه اهمیت زیادی دارد.
صفحات، کامپوننت‌ها، توابع کمکی و فایل‌های مربوط به داده بهتر است جای مشخصی داشته باشند.
البته یک ساختار ثابت برای تمام پروژه‌های Next.js وجود ندارد و بهتر است ساختار پروژه با اندازه و نیاز آن هماهنگ باشد.
## ۵. استفاده اشتباه از public
پوشه public برای فایل‌های استاتیک مانند تصاویر و آیکون‌ها مناسب است.
برای مثال:
```text
public/
└── images/
└── logo.png
```
اما قرار دادن تمام فایل‌های پروژه در public کار درستی نیست. کدهای مربوط به کامپوننت‌ها و منطق برنامه باید در بخش‌های مناسب پروژه قرار بگیرند.
## ۶. فراموش کردن فایل‌های مخصوص Next.js
Next.js فایل‌های خاصی دارد که هرکدام کاربرد مشخصی دارند:
* loading.tsx → نمایش حالت Loading
* error.tsx → مدیریت خطا
* not-found.tsx → صفحه 404
* layout.tsx → ساختار مشترک صفحات
* page.tsx → تعریف صفحه
شناخت این فایل‌ها باعث می‌شود برای هر قابلیت، راه‌حل مناسب خود Next.js را بشناسیم.
## ۷. قرار دادن اطلاعات حساس داخل کد
اطلاعاتی مانند API Key، رمز عبور و اطلاعات اتصال به دیتابیس نباید مستقیماً داخل فایل‌های کد قرار بگیرند.
بهتر است این اطلاعات را در Environment Variableها نگهداری کنیم:
```env
API_KEY=your-api-key
DATABASE_URL=your-database-url
```
و فایل .env را نیز در .gitignore قرار دهیم تا اطلاعات حساس به اشتباه وارد Git نشوند.
## ۸. نادیده گرفتن Performance
در شروع پروژه ممکن است همه‌چیز سریع به نظر برسد، اما با افزایش حجم پروژه، Performance اهمیت بیشتری پیدا می‌کند.
استفاده درست از ابزارهایی مانند next/image، انتخاب مناسب Server و Client Component و جلوگیری از ارسال JavaScript غیرضروری به مرورگر می‌تواند به عملکرد بهتر پروژه کمک کند.
## ۹. کپی کردن کد بدون درک نحوه کار آن
یکی دیگر از اشتباهات رایج، استفاده از کدهای آماده بدون اینکه بدانیم دقیقاً چه کاری انجام می‌دهند.
Next.js قابلیت‌های زیادی دارد و بهتر است هنگام استفاده از یک روش جدید، حداقل بدانیم:
* چرا از آن استفاده می‌کنیم؟
* چه مشکلی را حل می‌کند؟
* آیا روش ساده‌تری وجود دارد؟
این کار در درازمدت باعث می‌شود وابستگی کمتری به کدهای آماده داشته باشیم.
## جمع‌بندی
شروع کار با Next.js می‌تواند ساده‌تر باشد اگر چند نکته را از همان ابتدا رعایت کنیم:
* از "use client" فقط در مواقع لازم استفاده کنیم.
* ساختار پوشه‌های پروژه را مرتب نگه داریم.
* از قابلیت‌های داخلی Next.js استفاده کنیم.
* کامپوننت‌های قابل استفاده مجدد بسازیم.
* اطلاعات حساس را داخل کد قرار ندهیم.
* فایل‌های مخصوص Next.js مانند layout.tsx و loading.tsx را بشناسیم.
* از همان ابتدا به Performance و خوانایی کد توجه کنیم.
قرار نیست از روز اول همه قابلیت‌های Next.js را بلد باشیم. مهم‌تر از حفظ کردن ابزارها، این است که بدانیم هر قابلیت چه مشکلی را حل می‌کند و چه زمانی باید از آن استفاده کنیم.