ناکست جی اس (nuxt.js)

Nuxt چیست؟

Nuxt یک فریم‌ورک بصری وب است. اگر شما عاشق فریم‌ورک محبوب Vue JS هستید از این به بعد میتوانید وب اپلیکیشن‌های خود را با Nuxt پیاده سازی کنید. یک فریم‌ورک متن باز یا همان Open Source که تحت مجوز MIT توسعه وب را ساده و قدرتمند می‌کند.

Nuxt هر دو قابلیت Front-End و Back-End را ارائه می‌دهد تا شما بتوانید روی موارد مهم ساخت وب اپلیکیشن خود تمرکز داشته باشید. برای این که بفهمیم Nuxt JS چیه، ابتدا باید بدانیم برای ساخت یک وب اپلیکیشن مدرن به چه تکنولوژی‌هایی نیاز داریم که در زیر آن‌ها را شرح می‌دهیم.

فریم‌ورک‌های جاوااسکریپت

شما حتما به یک فریم‌ورک جاوااسکریپت برای ایجاد واکنش‌پذیری و ساخت اجزای آن نیاز دارید. انتخاب ما در این قسمت فریم‌ورک Vue JS است.

Webpack و Vite

شما برای مدیریت کردن فایل‌ها، استایل‌ها، عکس‌ها، فونت‌ها و از همه مهمتر برای مدیریت فایل‌های جاوااسکریپتی به Webpack نیاز دارید و کارش هم باندل کردن است. از Vite هم برای باندل کردن کدهای شما برای حالت Production استفاده می‌شود. که در اینجا ما هم از Webpack 5 و هم از Vite پشتیبانی میکنیم.

بروزترین سینتکس جاوااسکریپت

ترنسپایلری برای نوشتن بروزترین سینتکس جاوااسکریپت در حالی که از مرورگرهای قدیمی پشتیبانی می‌کند. در اینجا ما از esbuild استفاده می‌کنیم که یک باندلر بسیار سریع برای وب است.

Server Side

سروری برای ارائه خدمت به وب اپلیکیشن در حال توسعه شما، همچنین برای پشتیبانی از رندر سمت سرور با استفاده از API.

Nuxt از فریم‌ورک H3 برای تطبیق‌پذیری استقرار مانند Serverless، Workers، Node JS و عملکرد بی نظیر وب اپلیکیشن شما استفاده می‌کند.

کتابخانه‌های Routing

یک کتابخانه Routing برای Navigate کردن در سمت کلاینت استفاده می‌شود. ما در اینجا از  Vue-Router استفاده می‌کنیم.

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

شعار Nuxt این است که "ما هم قابلیت Front-End و Back-End را ارائه می‌دهیم تا شما بر روی موارد مهمتر تمرکز داشته باشید : ساخت وب اپلیکیشن خود".

موتور نمایش یا View Engine

Nuxt از Vue.js برای موتور نمایش خود استفاده می‌کند. تمام قابلیت‌های Vue 3 در Nuxt موجود است و می‌توانید از آن‌ها استفاده کنید. در مقالات بعدی در مورد ادغام Vue و Nuxt با شما صحبت خواهیم کرد.

Automation و کنوانسیون‌ها

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

• Auto-import
• File-Systemrouting و API Layer
• Data-Fetching
• پشتیبانی از Zero-Config TypeScript
• پیکربندی Build Tools

 در مورد این بخش ها در مقالات آینده بیشتر با شما صحبت خواهیم کرد و این اصطلاحات بیشتر جهت آشنا شدن شما با روند کار توسعه با Nuxt است.

Rendering Modes

Nuxt حالت‌های رندر متفاوتی را برای سازگاری با موارد مختلف ارائه می‌دهد.

• Universal Rendering (Server Side Rendering And Hydration)
• Client-Side Only Rendering
• Full Static Site Generation
• Hybrid Rendering (Per-Routes Caching Strategy)

در مورد همه این حالت‌ها در مقالات بعدی توضیحات مفصلی به شما ارائه می‌دهیم.

موتور سرور یا Server Engine

موتور سرور Nuxt، Nitro است که برای ساخت و استقرار سرورهای جاوااسکریپت استفاده می‌شود. که در Nuxt قابلیت‌های جدیدی برای Full-Stack کارها فراهم می‌کند.

در حالت توسعه از Rollup و ورکرهای Node.js برای کد سرور و Context Isolation استفاده می‌کند. همچنین API سرور شما را با خواندن فایل‌ها در مسیر /server/api/ تولید می‌کند ومیدلورهای سرور شما را از مسیر /server/middleware/ می‌خواند.

در حالت پروداکشن Nitro برنامه و سرور شما را در دایرکتوری اصلی در فایل .output می‌سازد.

Production-ready

وبسایت‌های نوشته شده با Nuxt را می توان هم بر روی سرور node و هم بر روی سرور deno مستقر کرد. در این خصوص در مقالات آینده به صورت تخصصی بحث خواهیم کرد.

معماری

Nuxt از  core-package های مختلفی تشکیل شده است:

• Core-engine : Nuxt
• Bundlers : @nuxt/vite-builder و @nuxt/webpack-builder
• رابط کاربری Command-Line : nuxi
• Server Engine : nitro
• Development kit : @nuxt/kit

خود Nuxt توصیه می‌کند که به همه مفاهیم بالا را به طور کامل مطالعه و درک کنید تا دید نسبتا کاملی به Nuxt و قابلیت‌های آن داشته باشید .

Nuxt ستون فقرات پروژه Vue.js شماست که ساختاری را برای ساخت پروژه شما، با اطمینان و در عین حال انعطاف پذیر فراهم می‌کند. قابل گسترش با اکوسیستم ماژولاری قوی و hooks engine است. اتصال شما را با REST و GraphQL، CMS مورد علاقه شما و فریمورک‌های CSS، به آسانی فراهم می‌کند. پشتیبانی از PWA و AMP تنها نصب یک ماژول با شما فاصله دارد.

اگر میخواهید این فریمورک جالب را امتحان کنید با من در مقاله بعدی همراه بشید تا با هم آن را نصب کنیم.