فصل هفتم: ویژگی‌های پیشرفته Nuxt

در این فصل، به بررسی برخی از ویژگی‌های پیشرفته Nuxt 3 در اپلیکیشن مرکز اجاره کشتی‌های کروز می‌پردازیم. این ویژگی‌ها شامل میدلورها (Middleware) برای حفاظت از مسیرها، کامپوزابل‌ها (Composables) برای مدیریت منطق قابل استفاده مجدد، و بهینه‌سازی تصاویر با Nuxt Image هستند. این ابزارها به ما کمک می‌کنند تا اپلیکیشن را ایمن‌تر، ماژولارتر و بهینه‌تر کنیم. هر بخش به‌طور کامل توضیح داده شده و کدهای مربوطه شرح داده می‌شوند.

میدلور برای حفاظت از مسیرها (middleware/auth.ts)

میدلورها در Nuxt توابعی هستند که قبل از رندر شدن یک مسیر اجرا می‌شوند و می‌توانند برای انجام کارهایی مانند احراز هویت، اعتبارسنجی یا تغییر مسیر استفاده شوند. در این پروژه، یک میدلور برای حفاظت از صفحه رزروها (/bookings) ایجاد می‌کنیم تا فقط کاربران احراز هویت‌شده بتوانند به آن دسترسی داشته باشند.

کد:

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to) => {
  const isAuthenticated = true; // شبیه‌سازی احراز هویت؛ در تولید از Nuxt Auth استفاده کنید
  if (to.path === '/bookings' && !isAuthenticated) {
    return navigateTo('/login');
  }
});

اعمال در nuxt.config.ts:

export default defineNuxtConfig({
  // ...سایر تنظیمات
  routeRules: {
    '/bookings': { middleware: ['auth'] },
  },
});

توضیحات:

  1. تعریف میدلور:

  2. defineNuxtRouteMiddleware: تابع Nuxt برای تعریف یک میدلور مسیر.

  3. پارامتر to: اطلاعات مسیر مقصد (مانند /bookings) را فراهم می‌کند.
  4. isAuthenticated: یک متغیر boolean که احراز هویت کاربر را شبیه‌سازی می‌کند (در اینجا به‌صورت ثابت true تنظیم شده است). در پروژه واقعی، این مقدار باید از یک سیستم احراز هویت (مانند @sidebase/nuxt-auth) بررسی شود.

  5. اگر مسیر /bookings باشد و کاربر احراز هویت نشده باشد (!isAuthenticated)، با استفاده از navigateTo('/login') به صفحه ورود هدایت می‌شود.

  6. اعمال میدلور:

  7. در فایل nuxt.config.ts، از routeRules برای اعمال میدلور auth به مسیر /bookings استفاده شده است.

  8. این تنظیم تضمین می‌کند که میدلور برای هر درخواست به صفحه رزروها اجرا شود.

  9. کاربرد:

  10. این میدلور از دسترسی غیرمجاز به صفحه رزروها جلوگیری می‌کند.

  11. در یک اپلیکیشن واقعی، می‌توانید این میدلور را با یک سیستم احراز هویت کامل (مانند OAuth یا JWT) ادغام کنید تا بررسی کند که آیا کاربر وارد شده است یا خیر.

  12. مزایا:

  13. امنیت: تضمین می‌کند که فقط کاربران مجاز به صفحات حساس دسترسی دارند.

  14. انعطاف‌پذیری: می‌توان میدلور را برای مسیرهای دیگر یا با منطق پیچیده‌تر گسترش داد.

  15. یکپارچگی با Nuxt: میدلورها به‌صورت بومی در Nuxt پشتیبانی می‌شوند و نیازی به ابزارهای خارجی ندارند.

  16. یادداشت برای تولید:

  17. در اینجا، احراز هویت به‌صورت شبیه‌سازی شده است. برای پروژه‌های واقعی، توصیه می‌شود از ماژول @sidebase/nuxt-auth یا سایر سیستم‌های احراز هویت استفاده کنید تا بررسی‌های واقعی (مانند بررسی توکن JWT) انجام شود.

کامپوزابل برای قالب‌بندی تاریخ (composables/useFormatDate.ts)

کامپوزابل‌ها در Nuxt و Vue 3 توابعی هستند که منطق قابل استفاده مجدد را کپسوله می‌کنند. در این پروژه، یک کامپوزابل برای قالب‌بندی تاریخ‌ها ایجاد می‌کنیم تا تاریخ‌های رزرو در داشبورد رزروها به‌صورت خوانا نمایش داده شوند.

کد:

// composables/useFormatDate.ts
export const useFormatDate = (date: Date | string) => {
  return new Date(date).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
};

استفاده در bookings.vue:

<p>Dates: {{ useFormatDate(booking.startDate) }} to {{ useFormatDate(booking.endDate) }}</p>

توضیحات:

  1. تعریف کامپوزابل:

  2. useFormatDate: یک تابع کامپوزابل که یک تاریخ (به‌صورت Date یا string) دریافت کرده و آن را به فرمت خوانا تبدیل می‌کند.

  3. new Date(date): ورودی را به شیء Date تبدیل می‌کند.

  4. toLocaleDateString('en-US', {...}): تاریخ را به فرمت محلی (برای مثال، "October 16, 2025") با تنظیمات زیر تبدیل می‌کند:

    • year: 'numeric': سال به‌صورت کامل (مثلاً 2025).
    • month: 'long': ماه به‌صورت کامل (مثلاً October).
    • day: 'numeric': روز به‌صورت عددی (مثلاً 16).

  5. استفاده در bookings.vue:

  6. در صفحه داشبورد رزروها، این کامپوزابل برای نمایش تاریخ‌های شروع و پایان هر رزرو به‌صورت خوانا استفاده می‌شود.

  7. برای مثال، اگر booking.startDate برابر با 2025-10-16 باشد، خروجی useFormatDate(booking.startDate) چیزی مانند "October 16, 2025" خواهد بود.

  8. کاربرد:

  9. این کامپوزابل منطق قالب‌بندی تاریخ را متمرکز کرده و امکان استفاده مجدد از آن را در سراسر اپلیکیشن فراهم می‌کند.

  10. برای مثال، می‌توان آن را در صفحات دیگر یا کامپوننت‌ها برای نمایش تاریخ‌های مختلف استفاده کرد.

  11. مزایا:

  12. قابلیت استفاده مجدد: به‌جای تکرار کد قالب‌بندی تاریخ در چندین مکان، این منطق در یک مکان متمرکز شده است.

  13. خوانایی: تاریخ‌ها به فرمت کاربرپسند نمایش داده می‌شوند.

  14. انعطاف‌پذیری: می‌توان تنظیمات toLocaleDateString را تغییر داد تا فرمت‌های دیگری (مانند فرمت‌های محلی دیگر) پشتیبانی شوند.

  15. یادداشت برای گسترش:

  16. می‌توان این کامپوزابل را گسترش داد تا از تنظیمات محلی کاربر (مانند fa-IR برای فارسی) یا فرمت‌های سفارشی پشتیبانی کند.

بهینه‌سازی تصاویر با Nuxt Image

ماژول @nuxt/image در Nuxt 3 برای بهینه‌سازی تصاویر استفاده می‌شود، که باعث کاهش حجم تصاویر، بهبود سرعت بارگذاری و پشتیبانی از فرمت‌های مدرن مانند WebP می‌شود. در این پروژه، از <NuxtImg> در کامپوننت ShipCard.vue و صفحه جزئیات کشتی (pages/ships/[id].vue) برای نمایش تصاویر کشتی‌ها استفاده شده است.

توضیحات:

  1. استفاده از <NuxtImg>:

  2. در ShipCard.vue:

     <NuxtImg :src="ship.image" alt="Ship" class="w-full h-48 object-cover" provider="static" />
  • در pages/ships/[id].vue:
     <NuxtImg :src="ship.image" alt="Ship" class="w-full h-64 object-cover mb-4 rounded" />

  • ویژگی‌ها:

    • :src="ship.image": آدرس تصویر از پراپ ship.image گرفته می‌شود (مثلاً /images/ocean.jpg).
    • alt="Ship": متن جایگزین برای دسترسی‌پذیری و سئو.
    • provider="static": مشخص می‌کند که تصاویر از پوشه public/ لود می‌شوند (تنظیم‌شده در nuxt.config.ts).
    • کلاس‌های Tailwind (مانند w-full h-48 object-cover) برای تنظیم اندازه و نحوه نمایش تصویر.

  • ذخیره‌سازی تصاویر:

  • تصاویر باید در پوشه public/images/ ذخیره شوند (مثلاً public/images/ocean.jpg و public/images/luxury.jpg).

  • در محیط تولید، می‌توان از ارائه‌دهنده‌های CDN (مانند Cloudinary یا ImageKit) استفاده کرد تا تصاویر از سرورهای خارجی لود شوند. این کار با تغییر تنظیم provider در nuxt.config.ts انجام می‌شود.

  • مزایای بهینه‌سازی تصاویر:

  • فشرده‌سازی خودکار: @nuxt/image تصاویر را فشرده کرده و حجم آن‌ها را کاهش می‌دهد.

  • فرمت‌های مدرن: پشتیبانی از فرمت‌هایی مانند WebP که حجم کمتری نسبت به JPEG یا PNG دارند.
  • بارگذاری تنبل (Lazy Loading): تصاویر به‌صورت پیش‌فرض به‌صورت تنبل لود می‌شوند، یعنی فقط زمانی که در viewport کاربر قرار گیرند بارگذاری می‌شوند.

  • تغییر اندازه خودکار: تصاویر به اندازه مورد نیاز رندر می‌شوند (بر اساس کلاس‌های CSS یا ویژگی‌های <NuxtImg>).

  • کاربرد:

  • در ShipCard.vue، تصاویر در کارت‌های کوچک (ارتفاع ۴۸ واحد) نمایش داده می‌شوند.

  • در صفحه جزئیات کشتی، تصاویر بزرگ‌تر (ارتفاع ۶۴ واحد) هستند و گوشه‌های گرد دارند.

  • این بهینه‌سازی‌ها باعث بهبود سرعت بارگذاری صفحات و تجربه کاربری می‌شوند.

  • یادداشت برای تولید:

  • برای پروژه‌های بزرگ، توصیه می‌شود از یک CDN برای میزبانی تصاویر استفاده کنید تا بار سرور کاهش یابد.

  • می‌توان ویژگی‌های اضافی مانند sizes یا quality را به <NuxtImg> اضافه کرد تا بهینه‌سازی بیشتری انجام شود.

جمع‌بندی فصل هفتم

در این فصل، سه ویژگی پیشرفته Nuxt 3 را در اپلیکیشن مرکز اجاره کشتی‌های کروز بررسی کردیم:

  • میدلور برای حفاظت از مسیرها: با ایجاد میدلور auth، دسترسی به صفحه رزروها را محدود کردیم و پایه‌ای برای احراز هویت در پروژه‌های واقعی فراهم کردیم.
  • کامپوزابل برای قالب‌بندی تاریخ: با useFormatDate، منطق قالب‌بندی تاریخ را متمرکز و قابل استفاده مجدد کردیم.
  • بهینه‌سازی تصاویر با Nuxt Image: با استفاده از <NuxtImg>، تصاویر را بهینه‌سازی کردیم تا سرعت بارگذاری و عملکرد اپلیکیشن بهبود یابد.

این ویژگی‌ها اپلیکیشن را ایمن‌تر، ماژولارتر و بهینه‌تر می‌کنند. در فصل‌های بعدی، به ادغام با سیستم‌های مدیریت محتوا و تست اپلیکیشن خواهیم پرداخت.