زمانی که توسعهدهندههای وب در دهه 2000 مشغول ساختن وبسایتهای تعاملی بودن، کلی چالش رو توی مسیر توسعه شون میدیدن. مثلاً یکی از بزرگترین چالشهاشون این بود که چطور بتونن صفحات رو هم از سمت سرور و هم از سمت کاربر (کلاینت) به درستی رندر کنن. اون موقع، فریمورکهای زیادی بودن که هرکدوم یه جوری این مشکل رو حل میکردن، ولی همشون یه جوری ناقص بودن. بعد Vue.js اومد و با سادگی و انعطافپذیری خودش دل خیلیها رو برد😍. اما هنوز یه چیزی کم بود؛ یه ابزاری که بشه باهاش پروژههای بزرگ و پیچیده رو راحت مدیریت کرد. اینجا بود که NuxtJs وارد میدون شد.😎
حالا تصور کن، اگه NuxtJs نبود، ما برای ساختن وبسایتهای سریع و بهینه خیلی اذیت میشدیم. ایجاد وبسایتهایی که هم برای موتورهای جستجو بهینه باشن و هم کاربر پسند، بدون NuxtJs یه کابوس بود! خوشبختانه، NuxtJs این مشکلات رو حل کرد و الان میتونیم به راحتی پروژههای پیچیده رو مدیریت کنیم.
NuxtJs یه فریمورک خفن و سطح بالاست برای Vue.js که به توسعهدهندهها کمک میکنه برنامههای Vue.js رو با قابلیتهای رندرینگ سمت سرور (SSR) و تولید صفحات ایستا (Static Site Generation) بسازن. این فریمورک مخصوص ساختن برنامههای جهانی (Universal Apps) طراحی شده که هم روی سرور و هم توی مرورگر اجرا میشن. NuxtJs کار توسعه رو خیلی راحتتر و سریعتر میکنه و ابزارهای مختلفی برای بهبود عملکرد و SEO ارائه میده.
NuxtJs توسط دو تا برادر به اسمهای Alexandre و Sebastien Chopin (دمشون گرم🥹) در سال 2016 ساخته شد. هدفشون این بود که یه ابزار ساده و قوی برای مدیریت پروژههای Vue.js بسازن.این دو برادر با الهام گرفتن از Next.js که یه فریمورک مشابه برای React هست، NuxtJs رو توسعه دادن. از اون موقع تا الان، NuxtJs به یکی از محبوبترین فریمورکها برای توسعهدهندههای Vue.js تبدیل شده.
وقتی یه پروژه جدید با NuxtJs ایجاد میکنی، ساختار فایلها و پوشههای مختلفی بهت نشون داده میشه که توسط CLI تولید شدن. این فایلها و پوشهها خیلی مهمن و برخی از پوشهها باید بدون تغییر باقی بمونن مگر اینکه نیاز به تنظیمات اضافی داشته باشن.
بیایید نگاهی به ساختار پوشهها بندازیم و هر فایل و پوشه رو بررسی کنیم و بدونیم چرا مهمن.
پوشه nuxt. یه دایرکتوری مخفی هست که وقتی سرور توسعه رو اجرا میکنی، ایجاد میشه و بهش دایرکتوری بیلد هم میگن. این پوشه حاوی فایلها یا آثار تولید شده هنگام اجرای فرمان npm run build هست.
توجه کن که فقط برای دیباگ میتونی فایلهای این پوشه رو تغییر بدی چون این فایلها دوباره وقتی فرمان dev یا build رو اجرا کنی، به صورت خودکار تولید میشن.
پوشه assets حاوی همهی منابع کامپایل نشده مثل تصاویر، فونتها، فایلهای SASS و Style هست. Webpack هر فایلی که تو این پوشه قرار داره رو در حین فرآیند رندر کامپایل میکنه.
پوشه components مشابه پوشه کامپوننتها تو Vue.js هست، جایی که همهی کامپوننتهای Vue ذخیره میشن. کامپوننتها فایلهایی هستن که قسمتهای مختلف صفحاتت رو تشکیل میدن و میتونن دوباره استفاده بشن و تو صفحات، لایوتها و کامپوننتهای دیگه وارد بشن.
پوشه layouts ساختار اپلیکیشن رو ذخیره میکنه و برای جدا کردن ساختارهای مختلف اپلیکیشن برای کاربران احراز هویت شده یا مهمان خیلی مفیده. میتونی لایوتهای مختلفی برای ساختار اپلیکیشن ایجاد کنی.
گاهی اوقات ممکنه بخوای بعضی از صفحات سایتت سایدبار، هدر، یا فوتر متفاوتی داشته باشن. اینا بیشتر با استفاده از فایلهای لایوت که تو پوشه layouts ذخیره شدن، سازماندهی میشن.
میدلورها توابع سفارشی ای هستن که میتونن قبل از رندر شدن یه صفحه یا گروهی از صفحات (لایوت) اجرا بشن و میتونن توی پوشه میدلورها تو NuxtJs تعریف و ذخیره بشن.
یکی از کاربرهای میدلور اینه که اگه بخوای دسترسی به صفحات خاصی رو محدود کنی، میتونی میدلوری تنظیم کنی تا چک کنه که کاربر وارد شده یا نه.
توی NuxtJs، میدلورها شبیه میدلورهای هر فریمورک بکاند مثل ExpressJS، Laravel و.... کار میکنن.
پوشه pages اساس سیستم مسیریابی NuxtJs هست چون همه فایلهای .vue داخل این پوشه رو میخونه و پیکربندی مسیریابی رو به صورت خودکار ایجاد میکنه.
پوشه pages حاوی ویوها و مسیرهای اپلیکیشن هست و هر کامپوننت صفحه هم یک کامپوننت استاندارد Vue هست. با این حال، NuxtJs اونو به عنوان یک مسیر با اضافه کردن ویژگیها و توابع خاص برای ساده کردن توسعه برنامه جهانی تو در نظر میگیره.
پوشه plugins حاوی کدهای جاوااسکریپتی هست که میخوای قبل از ایجاد اپلیکیشن Vue.js اصلی اجرا بشن. اینجا جایی هست که باید پلاگینهای Vue رو اضافه کنی.
توی NuxtJs، به جای استفاده از تابع Vue.use فقط یه فایل جدید توی پوشه پلاگینها ایجاد میکنی و پلاگین Vue رو با استفاده از فایل nuxt.config.js به ویو تزریق میکنی.
پوشه static حاوی همه فایلهای استاتیک پروژهات هست که احتمالاً تغییر نمیکنن یا باید بدون هیچ کامپایلی رندر بشن.
همه فایلهایی که توی دایرکتوری static قرار دارن به صورت خودکار توسط NuxtJs اجرا میشن و از طریق URL ریشه پروژهات قابل دسترسی هستن.
این دایرکتوری برای فایلهایی مثل favicon، robots.txt و غیره عالیه.
پوشه store حاوی همه فایلهای مربوط به Store ویوایکس است و به صورت پیشفرض به ماژولها تقسیم میشود.
ویوایکس به صورت پیشفرض غیرفعال است. برای فعال کردن ویوایکس، باید یک فایل به نام index.js در پوشه store ایجاد کنید.
NuxtJs کلی ویژگی خفن داره که کار رو برای توسعهدهندهها خیلی راحتتر میکنه. از رندرینگ سمت سرور گرفته تا تولید صفحات ایستا، این فریمورک همه چی رو داره. بیایید نگاهی به این ویژگیهای باحال بندازیم و ببینیم چرا NuxtJs اینقدر محبوب شده.
رندرینگ سمت سرور (SSR) فرآیندیه که در اون محتوای HTML صفحه توی سرور تولید میشه و بعد به مرورگر کاربر ارسال میشه. این روش باعث میشه که صفحه سریعتر لود بشه و موتورهای جستجو بهتر بتونن محتوای سایت رو ایندکس کنن.
مزایای SSR
برای فعالسازی SSR توی فایل nuxt.config.js کافیه این خط رو اضافه کنی:
export default {
ssr: true, // فعالسازی SSR
}
استفاده از SSR با خودش یه سری چالشها هم داره:
SSR نیاز داره که سرور برای هر درخواست HTML تولید کنه. این فرآیند میتونه منابع زیادی مصرف کنه، بهخصوص برای برنامههای پر ترافیک.
راهکار:
SSR پیچیدگیهای بیشتری رو به جریان توسعه اضافه میکنه. برخلاف رندرینگ سمت کلاینت که مرورگر کار رو انجام میده، SSR هم سرور و هم کلاینت رو درگیر میکنه که میتونه فرآیند اشکالزدایی و توسعه رو پیچیدهتر کنه.
راهکار:
برخی از هوکهای چرخه حیات مثل mounted فقط روی کلاینت اجرا میشن و باید به درستی مدیریت بشن.
راهکار:
NuxtJs در تولید صفحات استاتیک هم حرفهای زیادی برای گفتن داره (کلا توی هر بخشی یه دستی بر آتش داره😃).
این ویژگی بهت اجازه میده که کل سایتت رو به صورت فایلهای HTML استاتیک تولید کنی که میتونن توسط CDN ارائه بشن. این کار باعث میشه وبسایتت خیلی سریع و امن باشه.
مزایای SSG
برای استفاده از SSG با NuxtJs، کافیه این تنظیمات رو توی فایل nuxt.config.js انجام بدی:
export default {
target: 'static', // فعالسازی SSG
}
و برای ساخت صفحات ایستا از این فرمان استفاده کنی:
npm run generate
این فرمان همه صفحاتت رو به صورت فایلهای HTML ایستا تولید میکنه و توی دایرکتوری dist ذخیره میکنه.
NuxtJs بر پایه معماری ماژولار ساخته شده که بهت اجازه میده قابلیتهای مختلف رو با استفاده از ماژولها اضافه کنی، از احراز هویت گرفته تا پشتیبانی از PWA. این معماری ماژولار باعث میشه که بتونی بدون دردسر کد تکراری، قابلیتهای جدیدی به پروژهات اضافه کنی.
یکی دیگه از ویژگیهای خفن NuxtJs، تقسیم خودکار کده. NuxtJs کدتو به تکههای کوچیکتر تقسیم میکنه و فقط کد لازم رو به صورت اولیه لود میکنه. این کار باعث میشه که زمان بارگذاری صفحه سریعتر بشه و تجربه کاربری بهتری داشته وبسایت داشته باشه.
مزایای تقسیم خودکار کد:
سیستم مسیریابی تو NuxtJs خیلی قدرتمند هست. این سیستم از مسیرهای تودرتو و دینامیک پشتیبانی میکنه و به صورت خودکار پیکربندی مسیریابی رو بر اساس ساختار فایل پروژهات ایجاد میکنه.
تولید خودکار مسیر: NuxtJs دایرکتوری pages رو اسکن میکنه و به صورت خودکار مسیرها رو برای هر فایل ایجاد میکنه. مثلاً فایلی به نام about.vue توی دایرکتوری pages یه مسیر برای /about ایجاد میکنه.
pages/
├── index.vue // ایجاد مسیر برای '/'
├── about.vue // ایجاد مسیر برای '/about'
└── contact.vue // ایجاد مسیر برای '/contact'
مسیرهای تودرتو: NuxtJs از مسیرهای تودرتو پشتیبانی میکنه با ایجاد دایرکتوریها در فولدر pages. این کار اجازه میده که ساختارهای مسیریابی پیچیده رو به راحتی بسازی.
pages/
├── user/
│ ├── index.vue // ایجاد مسیر برای '/user'
│ ├── profile.vue // ایجاد مسیر برای '/user/profile'
│ └── settings.vue // ایجاد مسیر برای '/user/settings'
مسیریابی دینامیک: NuxtJs بهت اجازه میده که مسیرهای دینامیک رو با استفاده از نامگذاری فایلها تعریف کنی. پیشوند یه فایل یا دایرکتوری رو با زیرخط (_) برای نشان دادن یک بخش دینامیک.
pages/
├── user/
│ ├── _id.vue // ایجاد مسیر دینامیک برای '/user/:id'
NuxtJs با یه سری ابزارهای توسعه قوی به کمک توسعه دهنده میاد، از جمله CLI، تعویض ماژولهای HMR و گزارش خطاهای دقیق. این ابزارها فرآیند توسعه رو راحتتر و لذتبخشتر میکنن.
سرور توسعه Nuxt ابزار قدرتمندی هست که تعویض ماژولهای HMR رو به صورت پیشفرض ارائه میده. این یعنی هر تغییری که توی کد میدی، بلافاصله توی مرورگر منعکس میشه بدون اینکه نیاز به رفرش صفحه داشته باشی.
خط فرمان Nuxt.js (CLI) خیلی از کارها رو ساده میکنه مثل ایجاد پروژه، توسعه و دیپلوی کردن. با فرمانهای ساده میتونی پروژه جدید بسازی، سرور توسعه رو راه بندازی، سایت استاتیک بسازی و خیلی کارهای دیگه.
فرمانهای متداول:
Nuxt.js با ابزارهای توسعه یکپارچهاش تجربه توسعهدهنده رو خیلی بهبود میده و ویژگیهای قدرتمندی مثل تعویض CLI قوی، ماژولهای گسترده و ابزارهای موثر توسعه رو ارائه میده. این ابزارها فرآیند توسعه رو سریعتر و کارآمدتر میکنن تا برنامههای Vue.js با کیفیت بالایی بسازی.
استفاده از NuxtJs میتونه تجربه برنامهنویسی رو خیلی جذابتر و راحتتر کنه. اما مثل هر ابزار دیگهای، مزایا و معایب خودش رو داره. بیایید یه نگاه به مزایا و معایب استفاده از NuxtJs بندازیم.
مقایسه NuxtJs با بقیه فریمورکها میتونه خیلی کمک کنه تا بفهمیم کدوم یکی بهتر به نیازهای ما جواب میده. هر فریمورک ویژگیهای خاص خودش رو داره. بیایید ببینیم NuxtJs چه فرقی با بقیه داره و چرا ممکنه بخوایم ازش استفاده کنیم.
NuxtJs و Next.js هر دو فریمورکهای مشابهی هستن که برای Vue.js و React توسعه یافتن. هر دو فریمورک از رندرینگ سمت سرور و تولید صفحات ایستا پشتیبانی میکنن، اما تفاوتهای کوچیکی بینشون وجود داره. Next.js از React استفاده میکنه که برخی توسعهدهندهها اونو پیچیدهتر میدونن، در حالی که NuxtJs با Vue.js کار میکنه که برای خیلیها سادهتر و قابل فهمتره.
Gatsby یه فریمورک دیگه برای تولید صفحات ایستا هست که از React استفاده میکنه. Gatsby به شدت روی تولید صفحات ایستا تمرکز داره و ابزارهای زیادی برای بهینهسازی عملکرد ارائه میده. با این حال، NuxtJs علاوه بر تولید صفحات ایستا، از رندرینگ سمت سرور هم پشتیبانی میکنه که برای بعضی پروژهها میتونه خیلی مفید باشه.
شروع کار با NuxtJs خیلی راحته. با چند تا دستور ساده میتونی پروژه جدیدت رو بسازی و شروع کنی. اینجا میخواهیم قدم به قدم بگیم چطوری نصبش کنی، تنظیمات اولیه رو انجام بدی و اولین صفحهات رو بسازی.
برای شروع کار با NuxtJs، اول باید اونو نصب کنی. برای این کار میتونی از npm یا yarn استفاده کنی.
npx create-nuxt-app my-project
بعد از ایجاد پروژه، میتونی تنظیمات اولیه رو انجام بدی. مثلاً میتونی مسیرهای مختلف رو تعریف کنی و پلاگینهای مورد نیاز رو نصب کنی.
با استفاده از سیستم فایل مبتنی بر مسیرها، میتونی اولین صفحه خودت رو ایجاد کنی. به سادگی یه فایل جدید با پسوند .vue توی پوشه pages ایجاد کن.
<template>
<div>
<h1>Hello, NuxtJs!</h1>
</div>
</template>
<script>
export default {
name: 'HomePage'
}
</script>
برای استفاده از رندرینگ سمت سرور، میتونی از asyncData یا fetch استفاده کنی تا دادهها رو قبل از رندر شدن صفحه بگیری.
export default {
async asyncData({ params }) {
const data = await fetch(`https://api.example.com/data/${params.id}`);
return { data: data.json() };
}
}
fetch دادهها رو از API میگیره.
data.jsonدادهها رو به فرمت JSON تبدیل میکنه و به صفحه ارسال میکنه.
برای تولید صفحات ایستا، میتونی از فرمان generate استفاده کنی.
nuxt generate
nuxt generate تمامی صفحاتت رو به صورت ایستا تولید میکنه.
بله، NuxtJs یه پروژه منبع بازه و استفاده ازش کاملاً رایگانه. میتونی کد منبع رو از GitHub بگیری و هر تغییری که خواستی روش بدی.
بله، NuxtJs به طور خاص برای ویو جیاس طراحی شده و کلی امکانات جذاب مثل رندرینگ سمت سرور و مدیریت وضعیت رو به ویو جیاس اضافه میکنه.
برای بهروز رسانی NuxtJs، میتونی از دستورهای npm یا yarn استفاده کنی. بهروز رسانی به نسخههای جدیدتر خیلی راحت و با چند تا دستور ساده انجام میشه.
بله، NuxtJs با ابزارهای مختلفش برای مدیریت وضعیت، رندرینگ سمت سرور و قابلیتهای SEO، برای پروژههای بزرگ و پیچیده خیلی مناسبه.
بله، NuxtJs به راحتی با فریمورکها و ابزارهای دیگه مثل GraphQL و Tailwind CSS ترکیب میشه و دستت رو برای توسعه باز میذاره.
بله، NuxtJs کاملاً از تایپاسکریپت پشتیبانی میکنه و میتونی پروژههات رو با استفاده از تایپاسکریپت بنویسی تا از مزایای تایپ استاتیک بهره ببری.
بله، با استفاده از ماژول PWA در NuxtJs میتونی به راحتی اپلیکیشنهای وب پیشرو بسازی که قابل نصب روی دستگاههای مختلف باشن و حتی آفلاین هم کار کنن.
بله، NuxtJs جامعه کاربری فعالی داره و منابع آموزشی زیادی براش موجوده، از جمله مستندات رسمی، آموزشهای ویدیویی، انجمنها و وبلاگهای مختلف که بهت کمک میکنن تا یاد بگیری و مشکلاتت رو حل کنی.
NuxtJs یه فریمورک قدرتمند و انعطافپذیر برای توسعه برنامههای Vue.js هست که با ارائه قابلیتهای رندرینگ سمت سرور و تولید صفحات ایستا، بهت کمک میکنه تا وبسایتهای بهینه و سریعتری بسازی. اگه دنبال یه ابزار کامل و جامع برای مدیریت پروژههای Vue.js خودت هستی، NuxtJs یه انتخاب عالیه. با استفاده از این فریمورک، میتونی تجربه توسعه خودت رو به سطح جدیدی برسونی و وبسایتهایی با عملکرد و SEO بالا ایجاد کنی.