لرن بلاگ

ورود کاربر
تصویر مربوط به بنر مقاله nuxt.js چیست؟

nuxt.js چیست؟ نصب nuxt و شروع کار با آن

تصویر مریم منصوری

مریم منصوری

مقدمه

«nuxt.js چیست؟» این سؤالی است که در ذهن بسیاری از افرادی که در زمینه برنامه‌نویسی فعالیت می‌کنند (یا قصد فعالیت دارند)، شکل می‌گیرد. این فریم‌ورک جاوااسکریپت که در واقع می‌توانیم به نگارش فارسی آن را ناکست جی اس نیز بخوانیم، ابزاری قدرتمند برای ساختن وب‌سایت و نرم‌افزارهای تحت وب است. اساس و شالوده آن بر پایۀ vue.js بنا نهاده شده است. سازندگان آن هدف خود را از ایجاد چنین فریم‌ورکی، ایجاد یک محیط توسعه وب (Web Development) کارا و کارآمد عنوان کرده‌اند که تجربیات گذشته توسعه‌دهندگان وب‌سایت و برنامه‌نویسان در این حیطه را در خود جای داده است. پس در پاسخ به پرسش «nuxt.js چیست؟» به زبان ساده می‌توانیم عرض کنیم که ناکست جی اس یک فریم‌ورک متن‌باز رایگان است که راه‌حل مناسبی برای ساختن وب‌سایت‌ها و نرم‌افزارهای تحت وب (Web Applications) بر اساس فریم‌ورک vue.js در اختیار می‌گذارد. اگر با فریم‌ورک ویو جی اس آشنا باشید، یادگیری nuxt.js چندان دشوار نخواهد بود. بلکه بسیاری از روندها و فعالیت‌هایی که نیاز است در ساختار ویو جی اس خودتان سازماندهی کنید، در nuxt.js بصورت پیش‌فرض و براساس نام پوشه‌ها و فایل‌ها از قبل تنظیم شده‌اند.
لذا از این نظر کار شما برای ساختن وب‌سایت، راحت‌تر خواهد بود. به چنین تغییراتی که در nuxt ایجاد شده و به عبارتی فرآیند کار را خودکار و اتوماتیک می‌کند، در اصطلاح Automation گفته می‌شود. در ادامه مقاله سعی می‌کنیم توضیحات مختصری در مورد این فرآیند Automation و قراردادهایی که در این فریم‌ورک لحاظ شده، ارائه کنیم. سپس به صورت اجمالی به پردازش سمت سرور (server-side rendering) که در حالت پیش‌فرض در این ابزار فعال است، می‌پردازیم. درنهایت نیز در مورد نحوه نصب nuxt توضیح می‌دهیم تا بتوانید گام نخست را در استفاده از nuxt.js بردارید.

قراردادها و فرآیند Automation در nuxt.js

همان‌طور که ذکر شد، فریم‌ورک ناکست جی اس از قراردادها1conventions و تنظیمات خودکار و جهت‌یافته‌ای در ساختار خود استفاده می‌کند. بعد از ایجاد یک پروژه nuxt.js، ساختار پوشه‌ها و نام‌گذاری آن‌ها مهم است و این موارد به ناکست در شناسایی بخش‌های وب‌سایت شما کمک می‌کند تا فرآیندهای تکراری و روتین سریع‌تر و روان‌تر شکل بگیرند. در نتیجه توسعه‌دهنده وب‌سایت2developer می‌تواند تمرکز خود را بر روی پروژه‌های اصلی و طرّاحی مناسب سایت بگذارد. البته فایل تنظیمات nuxt.js را می‌توان تغییر داد و رفتار پیش‌فرض این فریم‌ورک را به گونه دیگری نیز تنظیم کرد. در ادامه برای اینکه بهتر متوجه بشوید که «nuxt.js چیست؟» به برخی از این قراردادها و تنظیمات اشاره می‌کنیم.

تنظیم صفحات براساس نام فایل

در nuxt.js پوشه‌ای به نام pages وجود دارد که صفحات وب‌سایت شما باید در آن گنجانده شوند. این جزئی از همان فرآیند Automation است که قبلاً ذکر شد. به این ترتیب ساختار نرم‌افزار شما بهتر سازماندهی شده و نیازی به انجام تنظیمات دستی برای شناساندن صفحات به nuxt.js ندارید.

شکاندن کد3code splitting

به صورت خودکار nuxt.js کدهای وب‌سایت شما را به بخش‌های کوچکتر تقسیم می‌کند. این مسئله کمک می‌کند تا زمان بارگذاری اولیّه سایت کاهش یابد. در صورت تمایل به مطالعه بیشتر در خصوص مسائل مربوط به عملکرد سایت در زمینه جاوااسکریپت و کدهای آن پیشنهاد می‌کنیم مقاله «برطرف کردن مشکلات سرعت سایت در جاوااسکریپت» را مطالعه بفرمایید.

معرفی خودکار کامپوننت‌ها

برنامه‌نویسانی که از قبل با vue.js آشنایی دارند، می‌دانند که ساختار این فریم‌ورک بر مبنای کامپوننت‌ها4components و کامپوزبل‌ها5composables شکل می‌گیرد. ما در اینجا قصد توضیح این اصطلاحات را نداریم. اما به صورت پیش‌فرض بعد از ایجاد یک کامپوننت (یا کامپوزبل) در ویو جی اس شما باید در صفحه‌ای که قصد استفاده از آن را دارید، آن کامپوننت را معرّفی کنید. به اصطلاح گفته می‌شود کامپوننت را ایمپورت6import کنید.

در ساختار nuxt.js با توجه به فرآیند Automation نیاز به انجام چنین کارهایی نیست. یعنی براساس نام پوشه‌های ایجاد شده در ساختار نرم‌افزار، به صورت خودکار این شناسایی توسط nuxt صورت می‌گیرد. به چنین فرآیندی Auto-imports گفته می‌شود. در این راستا از مکانیزم‌های بهینه‌ای چون Tree-shaking نیز بهره برده شده است.

امکانات دریافت داده

در راستای درک بهتر ناکست جی اس و پاسخ به پرسش nuxt.js چیست، باید به یکی دیگر از قابلیت‌های این فریم‌ورک که دریافت داده از سمت سرور7Data fetching است، اشاره کنیم. در این زمینه nuxt.js کامپوزبل‌هایی را در اختیار برنامه‌نویس‌ها قرار می‌دهد و استراتژی‌های مناسبی برای بهینه کردن فرآیند انتقال و نمایش داده‌ها در خود جای داده است.

علاوه بر موارد ذکر شده قراردادها و تنظیمات خودکار دیگری چون zero config typescript ، server-side rendering و ابزارهای ساخت نرم‌افزار8Build tools نیز در ساختار این فریم‌ورک قدرتمند گنجانده شده‌اند. در ادامه در مورد یکی از این قابلیت‌ها به نام Server-Side Rendering9SSR که همان پردازش و اجرای کدها در سمت سرور باشد، توضیحات بیشتری ارائه می‌کنیم.

منظور از SSR در nuxt.js چیست؟

همان‌طور که ذکر شد یکی از ویژگی‌های بارز فریم‌ورک nuxt.js قابلیت اجرای کدها در سمت سرور یا همان SSR است. این مزیتی است که خیلی از افراد را به حرکت از سمت ویو جی اس به سمت ناکست جی اس می‌کشاند. به‌صورت پیش‌فرض شما برای ایجاد چنین قابلیتی در سایت‌های ساخته شده با vue.js باید تنظیمات و کدنویسی‌های خاصی را خودتان در فایل‌های سایت اعمال کنید. اما در nuxt.js این قابلیت به صورت پیش‌فرض قرارداده شده است و این مسئله کار را برای توسعه‌دهندگان وب‌سایت بسیار راحت می‌کند.

به بیان ساده قابلیت SSR باعث اجرای کدها در سمت سرور و به نوعی آماده‌سازی صفحات و مطالب سایت قبل از ارسال به سمت مرورگر کاربر (در سمت سرور) می‌شود. درحالیکه به‌صورت پیش‌فرض در vue.js این کارها در سمت مرورگر و توسط خود مرورگر انجام می‌گیرد. از جمله مشکلات چنین امری آن است که موتورهای جستجو نمی‌توانند به خوبی مطالب و محتوای سایت شما را شناسایی کنند. در ادامه به برخی از فواید SSR که اهمیت به کارگیری آن در ساختن سایت و نرم‌افزارهای تحت وب را نشان می‌دهد، اشاره می‌کنیم.

سرعت لود بهتر صفحات

با توجه به اینکه در SSR پردازش‌ها در سمت سرور صورت می‌گیرد، nuxt.js یک فایل HTML کاملاً آماده10fully rendered HTML-page را به سمت مرورگر کاربر ارسال می‌کند. این فایل و محتوای آن بلافاصله بعد از ارسال می‌تواند توسط مرورگر به مخاطب نمایش داده شود و نیازی به پردازش بیشتری ندارد. همین مسئله باعث می‌شود فرآیند لود صفحه و نمایش آن سریع‌تر صورت بگیرد. در نتیجه به خصوص در دستگاه‌ها یا شرایط اینترنت ضعیف، تجربه کاربری11UX بهتری را برای مخاطب ایجاد می‌کند.

سئوی سایت بهتر

همان‌طور که گفته شد، یکی از مزیت‌های مهم nuxt.js، قابلیت SSR و تأثیر آن بر روی سئوی سایت است. آیا تا به حال از خود پرسیده‌اید که وقتی فریم‌ورک قدرتمندی چون vue.js وجود دارد، دلیل استفاده از nuxt.js چیست؟ آن هم وقتی اساساً nuxt.js بر پایه ویو جی اس بنا شده است. یکی از مهم‌ترین دلایل، همین مسئله است که در nuxt.js صفحات و محتوای HTML (به دلیل قابلیت SSR) بلافاصله بعد از ارسال در دسترس است. این مسئله باعث می‌شود که محتوا توسط موتورهای جستجو بهتر قابل شناسایی باشد. در حالیکه در vue.js بعد از ارسال فایل‌ها، مرورگر کدهای جاوااسکریپت را اجرا کرده و تازه محتوا را نمایش می‌دهد. چنین فرآیندی چه بسا باعث شود که اصلاً مقاله سایت شما (که زحمت زیادی هم برای تولید محتوای آن کشیده‌اید) توسط موتورهای جستجو دیده نشود!

استفاده از کش و حافظه سرور

یکی دیگر از مزایای SSR، استفاده بهتر از کش12cache و حافظه سمت سرور است. یعنی مطالب و صفحات می‌توانند در سمت سرور در حافظه ذخیره شوند. این مسئله باعث بهبود عملکرد سایت و کاهش زمان اجرای هر دفعه کدها و نمایش مطالب می‌گردد.

روش نصب nuxt.js چیست؟

مشابه هر تکنولوژی دیگری در دنیای وب برای استفاده از nuxt.js نیز باید اقداماتی صورت بگیرد. در واقع به دو طریق عمده می‌توانید از این فریم‌ورک استفاده کنید. روش اول حالت آنلاین دارد. اما در روش دوم از طریق ترمینال و ابزارهای مربوطه می‌توانید در سیستم شخصی خود nuxt.js را نصب کرده و شروع به کار کنید. در ادامه در مورد هر یک از این دو روش توضیح مختصری می‌دهیم.

روش آنلاین استفاده از ناکست جی اس چیست؟

شما می‌توانید بدون نصب زبان یا تکنولوژی برنامه‌نویسی خاصی در محیط مرورگر خود و به صورت آنلاین به بررسی قابلیت‌های nuxt.js و استفاده از آن برای ایجاد پروژه خود، بپردازید. مزیت استفاده از این روش nuxt.js چیست؟ خوب مسلماً این‌گونه ابزارها، پیش‌نیازها و هر آنچه شما برای آغاز پروژه خود نیاز دارید، در اختیار شما می‌گذارند و نیازی به اقدام دیگری از سوی شما نیست.

از جمله این ابزارهای آنلاین می‌توان به StackBlitz و CodeSandbox اشاره کرد. در واقع آن‌ها مشابه ابزارهای ویرایش کد عمل می‌کنند که به شما اجازه می‌دهد تا در داخل آن‌ها شروع به کدنویسی و پیش بردن پروژه خود کنید.

تصویر مربوط به ابزار StackBlitz

روش استفاده از سیستم شخصی

در این روش در صورتی که پیش‌نیازهای زیر را در سیستم کامپیوتری خودتان نصب کرده باشید، می‌توانید در محیط دسکتاپ خودتان به ساختن وب‌سایت به کمک ناکست جی اس مشغول شوید. توجه کنید که این پیش‌نیازها مربوط به نسخه فعّال nuxt.js در زمان نگارش این مقاله (یعنی نسخه 3.14) هستند. ممکن است در آینده و با بالاتر رفتن نسخه‌های nuxt.js این پیش‌نیازها نیز تغییر کنند.

  • نود جی اس نسخه 18.x یا جدیدتر: البته پیشنهاد می‌شود که از جدیدترین نسخه LTS این ابزار در سیستم خود استفاده کنید.
  • نصب ویرایشگر کد در سیستم: در این زمینه نیز پیشنهاد سایت رسمی nuxt.js استفاده از ویرایشگرهایی چون Visual Studio Code و یا WebStorm است که به خوبی از nuxt.js و زبان جاوااسکریپت پشتیبانی می‌کنند.
  • وجود ترمینال: استفاده از ترمینال یا ابزارهای مشابه (مانند CMD13Command Prompt در محیط ویندوز) برای اجرای دستورهای خط فرمان ناکست جی اس ضروری است.

بعد از نصب پیش‌نیازهای ضروری بر روی سیستم خود، ترمینال را باز کرده و دستور زیر را در آن اجرا کنید:

npx nuxi@latest init <project-name>

البته به جای قسمت project-name باید نام دلخواه خودتان را برای پروژه ذکر کنید.

به این ترتیب با اتصال به اینترنت، موارد لازم دانلود شده و بر روی سیستم شما (در محل پوشه‌ای که دستور را اجرا کرده بودید) نصب می‌شوند. در نتیجه ساختار اوّلیه یک پروژه nuxt.js برای شما آماده و حاضر می‌شود. دیگر مشخص است که گام نهایی برای شروع پروژه nuxt.js چیست؟ به کمک دستور cd در محیط ترمینال (به شکل زیر) به محل پوشه موردنظر بروید:

cd <project-name>

سپس به کمک دستور زیر می‌توانید سرور nuxt.js را فعال کنید:

npm run dev -- -o

جمع‌بندی

در این مقاله سعی کردیم با توضیحات ارائه شده به پرسش «nuxt.js چیست؟» پاسخ دهیم. در مورد قابلیت‌ها و قراردادهایی که در این فریم‌ورک جاوااسکریپت وجود دارد، بیشتر صحبت کردیم. ویژگی SSR را که از جمله مزایای مهم nuxt نسبت به vue.js است، توضیح دادیم. در پایان نیز روش نصب nuxt.js را بیان کردیم. البته تمامی این موارد برای شروع به کار با این ابزار بوده است و جهت یادگیری کامل آن، زمان و تلاش بیشتری نیاز است.

پاورقی:

  • 1
    conventions
  • 2
    developer
  • 3
    code splitting
  • 4
    components
  • 5
    composables
  • 6
    import
  • 7
    Data fetching
  • 8
    Build tools
  • 9
    SSR
  • 10
    fully rendered HTML-page
  • 11
    UX
  • 12
    cache
  • 13
    Command Prompt
در صورتی که از خواندن مقاله فوق لذت برده‌اید، احتمالا مطالب کتاب های زیر نیز می تواند برای شما مفید باشد. توصیه لرن بلاگ آن است که چنین کتاب هایی را تهیه کرده یا در صورت وجود نسخه آنلاین، به مطالعه آنلاین آنها بپردازید: