فصل اول: مقدمه‌ای بر Nuxt.js در سال ۲۰۲۵

Nuxt.js یک فریم‌ورک کامل (Full-Stack) است که بر پایه Vue 3 ساخته شده و ابزارهای قدرتمندی برای توسعه وب‌اپلیکیشن‌های مدرن ارائه می‌دهد. این فریم‌ورک با ویژگی‌هایی مانند رندر سمت سرور (SSR)، تولید سایت استاتیک (SSG) و پشتیبانی از اپلیکیشن‌های وب پیش‌رونده (PWA)، به توسعه‌دهندگان امکان می‌دهد تا برنامه‌های سریع، بهینه و مقیاس‌پذیر بسازند. در سال ۲۰۲۵، نسخه سوم Nuxt (یا همان Nuxt 3) به دلیل قابلیت‌های پیشرفته و اکوسیستم قدرتمند خود، به یکی از محبوب‌ترین ابزارها برای توسعه وب تبدیل شده است.

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

ویژگی‌های کلیدی Nuxt 3 در سال ۲۰۲۵

Nuxt 3 با مجموعه‌ای از ابزارها و قابلیت‌های پیشرفته، توسعه وب‌اپلیکیشن‌ها را ساده‌تر و کارآمدتر کرده است. در ادامه، هر یک از این ویژگی‌ها به‌طور کامل توضیح داده شده است:

۱. رندر ترکیبی (Hybrid Rendering)

رندر ترکیبی به Nuxt 3 این امکان را می‌دهد که توسعه‌دهندگان بتوانند برای هر مسیر (Route) در اپلیکیشن، به‌صورت جداگانه بین رندر سمت سرور (SSR) و تولید سایت استاتیک (SSG) انتخاب کنند. این قابلیت انعطاف‌پذیری بالایی فراهم می‌کند:

  • SSR (Server-Side Rendering): در این حالت، صفحه در سمت سرور رندر شده و HTML کامل به مرورگر کاربر ارسال می‌شود. این روش برای صفحاتی که محتوای پویا دارند (مانند داشبوردهای کاربر یا صفحات با داده‌های به‌روز) ایده‌آل است، زیرا بهینه‌سازی سئو و سرعت بارگذاری اولیه را بهبود می‌بخشد.

  • SSG (Static Site Generation): در این روش، صفحات در زمان ساخت (Build Time) به‌صورت فایل‌های HTML استاتیک تولید می‌شوند. این گزینه برای صفحاتی که محتوای ثابت دارند (مانند صفحات فرود یا مقالات) مناسب است، زیرا سرعت بارگذاری بسیار بالا و هزینه سرور کمتری دارد.

  • با رندر ترکیبی، می‌توانید برای مثال صفحه اصلی را به‌صورت استاتیک (SSG) و داشبورد رزروها را به‌صورت SSR رندر کنید تا تعادل بین عملکرد و پویایی حفظ شود.

۲. ابزارهای توسعه Nuxt (Nuxt DevTools)

Nuxt DevTools یک ابزار بصری قدرتمند است که در سال ۲۰۲۵ به بخش جدایی‌ناپذیر توسعه با Nuxt تبدیل شده است. این ابزار به توسعه‌دهندگان کمک می‌کند تا:

  • دیباگ بصری: با ارائه نمای گرافیکی از ساختار اپلیکیشن، مانند کامپوننت‌ها، مسیرها و ماژول‌ها، مشکلات را سریع‌تر شناسایی کنند.
  • پروفایل عملکرد: اطلاعاتی درباره زمان بارگذاری صفحات، مصرف حافظه و بهینه‌سازی‌های ممکن ارائه می‌دهد.
  • نمایش داده‌های SSR و SSG: نشان می‌دهد که هر صفحه چگونه رندر می‌شود و چه داده‌هایی در سمت سرور یا کلاینت پردازش می‌شوند. این ابزار به‌ویژه برای پروژه‌های بزرگ و پیچیده مانند مرکز اجاره کشتی‌های کروز، که نیاز به دیباگ سریع و بهینه‌سازی عملکرد دارند، بسیار مفید است.

۳. سرور Nitro

Nitro موتور سرور جدید Nuxt 3 است که جایگزین سرورهای سنتی Node.js در نسخه‌های قبلی شده است. این موتور سبک و با عملکرد بالا طراحی شده و ویژگی‌های زیر را ارائه می‌دهد:

  • سرعت بالا: با استفاده از فناوری‌های مدرن مانند Bun و Deno (در کنار Node.js)، اجرای کد در سمت سرور را بهینه می‌کند.
  • پشتیبانی از محیط‌های مختلف: Nitro امکان استقرار اپلیکیشن در پلتفرم‌های متنوع مانند Vercel، Netlify، Cloudflare و سرورهای محلی را فراهم می‌کند.
  • APIهای سرور: امکان ایجاد مسیرهای API مستقیم در پروژه Nuxt را می‌دهد، که برای شبیه‌سازی بک‌اند در اپلیکیشن ما (مانند API کشتی‌ها و رزروها) استفاده می‌شود. در پروژه مرکز اجاره کشتی‌ها، از Nitro برای ایجاد مسیرهای API مانند /api/ships و /api/bookings استفاده خواهیم کرد.

۴. اکوسیستم ماژول‌های Nuxt

Nuxt 3 از یک اکوسیستم غنی از ماژول‌ها پشتیبانی می‌کند که قابلیت‌های اضافی را به پروژه اضافه می‌کنند. برخی از ماژول‌های کلیدی که در این پروژه استفاده می‌شوند عبارتند از:

  • @nuxtjs/tailwindcss: امکان استفاده از فریم‌ورک Tailwind CSS را برای استایل‌دهی سریع و پاسخ‌گو (Responsive) فراهم می‌کند.
  • @pinia/nuxt: ادغام Pinia، کتابخانه مدیریت وضعیت سبک و مدرن برای Vue 3، را ساده می‌کند. در اپلیکیشن ما، Pinia برای مدیریت داده‌های کشتی‌ها و رزروها استفاده می‌شود.

  • @nuxt/image: بهینه‌سازی تصاویر را با تغییر اندازه خودکار، فشرده‌سازی و پشتیبانی از فرمت‌های مدرن (مانند WebP) ارائه می‌دهد.

  • سایر ماژول‌ها مانند @nuxt/content برای مدیریت محتوای CMS-مانند یا @sidebase/nuxt-auth برای احراز هویت نیز در دسترس هستند و در فصل‌های بعدی بررسی می‌شوند.

۵. پشتیبانی بومی از TypeScript

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

  • تایپینگ خودکار: بسیاری از بخش‌های Nuxt (مانند composables، server routes و stores) به‌صورت خودکار تایپ‌های TypeScript را ارائه می‌دهند.
  • ایمنی در کدنویسی: با استفاده از TypeScript، خطاها در زمان توسعه شناسایی می‌شوند، که برای پروژه‌های پیچیده‌ای مانند مرکز اجاره کشتی‌ها حیاتی است. در این پروژه، ما از TypeScript برای تعریف مدل‌های داده (مانند Ship و Booking) و اطمینان از ایمنی نوع در storeها و APIها استفاده می‌کنیم.

نیازمندی‌های اپلیکیشن مرکز اجاره کشتی‌های کروز

این پروژه یک اپلیکیشن کامل برای اجاره کشتی‌های کروز طراحی می‌کند که نیازمندی‌های زیر را برآورده می‌کند:

۱. صفحه اصلی (Homepage)

  • توضیح: صفحه اصلی یک صفحه فرود بهینه‌شده برای سئو است که کاربران را به اپلیکیشن معرفی می‌کند و آن‌ها را به سمت مرور کشتی‌ها هدایت می‌کند.

  • ویژگی‌ها:

  • متادیتای پویا (Dynamic Metadata) برای بهبود رتبه‌بندی در موتورهای جستجو (مانند عنوان، توضیحات و تصویر Open Graph).

  • طراحی جذاب و پاسخ‌گو با استفاده از Tailwind CSS.
  • لینک مستقیم به صفحه لیست کشتی‌ها.

۲. لیست کشتی‌ها (Ships List)

  • توضیح: این صفحه لیستی از کشتی‌های کروز موجود را نمایش می‌دهد که کاربران می‌توانند آن‌ها را فیلتر کرده و صفحه‌بندی کنند.

  • ویژگی‌ها:

  • قابلیت جستجو بر اساس نام کشتی.

  • فیلتر بر اساس قیمت (حداکثر قیمت در روز).
  • صفحه‌بندی (Pagination) برای نمایش تعداد محدودی کشتی در هر صفحه.
  • نمایش کارت‌های کشتی با تصاویر بهینه‌شده توسط @nuxt/image.

۳. جزئیات کشتی (Ship Details)

  • توضیح: صفحه‌ای برای نمایش اطلاعات کامل یک کشتی خاص، همراه با فرم رزرو.

  • ویژگی‌ها:

  • نمایش جزئیات مانند ظرفیت، قیمت روزانه و امکانات.

  • فرم رزرو با اعتبارسنجی (Validation) برای انتخاب تاریخ شروع و پایان.
  • استفاده از VeeValidate و Yup برای اعتبارسنجی فرم‌ها.
  • متادیتای پویا برای هر کشتی.

۴. داشبورد رزروها (Bookings Dashboard)

  • توضیح: این صفحه تاریخچه رزروهای کاربر را نمایش می‌دهد.

  • ویژگی‌ها:

  • لیست رزروها با اطلاعات کشتی، تاریخ‌ها و قیمت کل.

  • طراحی پاسخ‌گو و کاربرپسند.
  • امکان به‌روزرسانی خودکار با استفاده از Pinia.

۵. مدیریت وضعیت با Pinia

  • توضیح: Pinia برای مدیریت وضعیت‌های مشترک در اپلیکیشن استفاده می‌شود، مانند داده‌های کشتی‌ها و رزروها.

  • ویژگی‌ها:

  • ذخیره‌سازی کشتی‌ها و رزروها در storeهای جداگانه.

  • استفاده از getters برای فیلتر کردن داده‌ها و actions برای به‌روزرسانی.
  • ادغام با TypeScript برای ایمنی نوع.

۶. شبیه‌سازی بک‌اند با مسیرهای سرور Nuxt

  • توضیح: از مسیرهای سرور Nuxt (Server Routes) برای شبیه‌سازی APIهای بک‌اند استفاده می‌شود تا داده‌های کشتی‌ها و رزروها را مدیریت کنیم.

  • ویژگی‌ها:

  • API برای دریافت لیست کشتی‌ها (/api/ships).

  • API برای افزودن و دریافت رزروها (/api/bookings).
  • در پروژه‌های واقعی، این APIها می‌توانند به پایگاه داده‌ای مانند Supabase متصل شوند.

۷. استایل‌دهی با Tailwind CSS

  • توضیح: Tailwind CSS برای طراحی رابط کاربری پاسخ‌گو و مدرن استفاده می‌شود.

  • ویژگی‌ها:

  • کلاس‌های آماده برای استایل‌دهی سریع.

  • طراحی پاسخ‌گو برای پشتیبانی از دسکتاپ و موبایل.
  • تعریف کامپوننت‌های سفارشی مانند دکمه‌ها و کارت‌ها.

۸. بهینه‌سازی عملکرد

  • توضیح: اپلیکیشن با استفاده از ابزارهای Nuxt بهینه‌سازی شده تا سرعت و تجربه کاربری بهبود یابد.

  • ویژگی‌ها:

  • استفاده از Nuxt Image برای بهینه‌سازی تصاویر (فشرده‌سازی و تغییر فرمت).

  • Lazy Loading برای بارگذاری تنبل کامپوننت‌ها و تصاویر، که باعث کاهش زمان بارگذاری اولیه می‌شود.

درباره پروژه مرکز اجاره کشتی‌های کروز

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