تفاوت توسعه محلی با تولیدی
دستور next dev فقط مسیرهایی را کامپایل میکند که بازدید میشوند، در حالی که next build و next start شامل بهینهسازیهایی مانند minify و hashگذاری فایلها هستند. این باعث میشود توسعه محلی سریعتر و سبکتر باشد.
۱. بررسی آنتیویروس سیستم
آنتیویروس میتواند سرعت دسترسی به فایلها را کاهش دهد. در ویندوز، پوشه پروژه را به لیست استثناهای Microsoft Defender اضافه کنید. در macOS، با دستور زیر حالت توسعهدهنده را فعال کنید:
sudo spctl developer-mode enable-terminalسپس به System Settings → Privacy & Security → Developer Tools بروید و ترمینال خود را فعال کنید.
۲. بهروزرسانی Next.js و استفاده از Turbopack
نسخهٔ جدید Next.js را نصب کنید تا از بهبودهای عملکردی بهرهمند شوید. Turbopack بهصورت پیشفرض فعال است:
npm install next@latest
npm run devبرای استفاده از Webpack:
npm run dev --webpack۳. بهینهسازی importها
وارد کردن کل کتابخانهها یا استفاده از barrel fileها میتواند سرعت کامپایل را کاهش دهد. بهجای آن، از import مستقیم استفاده کنید:
// نادرست:
import { TriangleIcon } from '@phosphor-icons/react'
// درست:
import { TriangleIcon } from '@phosphor-icons/react/dist/csr/Triangle'از یک مجموعه آیکون استفاده کنید و از ترکیب چند مجموعه پرهیز کنید.
۴. پیکربندی Tailwind CSS
در فایل tailwind.config.js، مسیرهای اسکن را محدود کنید:
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'], // مناسب
}از اسکن مسیرهایی مانند node_modules خودداری کنید.
۵. بررسی تنظیمات سفارشی Webpack
تنظیمات سفارشی Webpack ممکن است باعث کندی شوند. در صورت امکان، از Turbopack استفاده کنید یا تنظیمات را فقط برای build تولیدی فعال کنید.
۶. بهینهسازی مصرف حافظه
اگر اپلیکیشن شما بزرگ است، ممکن است به حافظه بیشتری نیاز داشته باشد. ماژولها را تقسیم کنید یا از وابستگیهای سبکتر استفاده کنید.
۷. Server Component و واکشی داده
تغییر در Server Component باعث رندر مجدد کل صفحه میشود. از گزینهٔ آزمایشی serverComponentsHmrCache برای کش کردن پاسخهای fetch در HMR استفاده کنید.
۸. توسعه محلی بهجای Docker
Docker در macOS و Windows ممکن است باعث کندی HMR شود. برای بهترین عملکرد:
- از
npm run devبهصورت محلی استفاده کنید - Docker را برای build و تست تولیدی نگه دارید
- در صورت نیاز، از Docker در لینوکس یا VM استفاده کنید
ابزارهای تشخیص مشکلات
لاگگیری دقیق fetch
module.exports = {
logging: {
fetches: {
fullUrl: true,
},
},
}ردیابی Turbopack
NEXT_TURBOPACK_TRACING=1 npm run devپس از بازتولید مشکل، سرور را متوقف کرده و اجرا کنید:
npx next internal trace .next/dev/trace-turbopackسپس فایل را در trace.nextjs.org مشاهده کنید.
جمعبندی
با بهینهسازی محیط توسعه محلی در Next.js میتوانید تجربهای سریعتر و روانتر داشته باشید. با بهروزرسانی وابستگیها، بهینهسازی importها، پیکربندی Tailwind و استفاده از ابزارهای تشخیصی، زمان کامپایل را کاهش داده و بهرهوری خود را افزایش دهید.