تطوير Nuxt.js
تطبيقات عالمية مدعومة بـ Vue مع Nuxt -- SSR و SSG والعرض الهجين ومسارات خادم API في إطار عمل واحد.
ما هو Nuxt؟
Nuxt هو إطار عمل Vue.js يتعامل مع كل ما تحتاجه تطبيقات الإنتاج: عرض من جانب الخادم، وإنشاء المواقع الثابتة، وتوجيه نظام الملفات، وإدارة الحالة، ومسارات خادم API -- مع تكوين شبه معدوم. حيث يتطلب Vue العادي تجميع هذه الأجزاء بنفسك، يوفرها Nuxt كنظام متماسك وموضوعي.
الميزة المميزة هي مرونة العرض. يمكن لتطبيق Nuxt واحد أن يخدم طرقًا مختلفة بإستراتيجيات عرض مختلفة: عرض الصفحة الرئيسية من جانب الخادم لـ SEO، وإنشاء منشورات المدونة بشكل ثابت في وقت البناء، وعرض لوحة التحكم المسجلة دخول العميل. هذا هو وضع العرض الهجين في Nuxt، المكون لكل مسار في nuxt.config.ts.
توجيه نظام الملفات
يولد Nuxt المسارات تلقائيًا من مجلد pages/ الخاص بك. لا يلزم ملف تكوين المسار. يصبح الملف في pages/blog/[slug].vue هو /blog/:slug. يصبح الملف في pages/about.vue هو /about. تنشئ الدلائل المتداخلة مسارات متداخلة.
يتسع هذا إلى طبقة الخادم. تصبح الملفات في server/api/ نقاط نهاية API. server/api/posts.get.ts يصبح معالج GET /api/posts. مكدس كامل في مشروع واحد، مع TypeScript في جميع أنحاء.
تنطبق نفس الاتفاقية على:
- composables/: Vue composables المستوردة تلقائيًا -- useFetch و useState و useAsyncData
- middleware/: وسيط المسار الذي يعمل قبل التنقل
- layouts/: مكونات التخطيط المشتركة التي تلف الصفحات
- plugins/: رمز يعمل عند تهيئة التطبيق
- components/: Vue مكونات مستوردة تلقائيًا بدون بيانات استيراد صريحة
أوضاع العرض
SSR (عرض من جانب الخادم): الوضع الافتراضي. يتم عرض HTML على الخادم لكل طلب. جيد للمحتوى الديناميكي والتخصيص والصفحات المصرح بها. مدعوم بواسطة محرك خادم Nitro.
SSG (إنشاء موقع ثابت): يتم إنشاء الصفحات مسبقًا في وقت البناء. الإخراج هو HTML ثابت يتم تقديمه من CDN. مكون مع nitro.prerender.routes أو بتعيين ssr: false على مستوى المسار.
العرض الهجين: تستخدم المسارات المختلفة إستراتيجيات مختلفة. يتيح لك routeRules في nuxt.config.ts تعيين قواعد prerender و ssr و TTL cache و redirect و CORS لكل مسار. هذه هي أقوى ميزة وغير مستخدمة في Nuxt.
وضع SPA: عرض جانب العميل بالكامل. مفيد للوحات التحكم أو لوحات المعلومات حيث لا يكون SEO مصدر قلق والتفاعل هو الأولوية.
ما نبنيه مع Nuxt
مواقع التسويق ومنصات المحتوى
Nuxt مع SSG أو العرض الهجين هو مزيج قوي لمواقع التسويق. يتم إنشاء مسارات المحتوى مسبقًا للأداء و SEO. المسارات الديناميكية -- البحث والفلاتر والتوصيات المخصصة -- تستخدم SSR أو الجلب من جانب العميل. والنتيجة هي موقع سريع وصديق لـ SEO مع تفاعل كامل حيث يكون مطلوبًا.
تطبيقات ويب بمكدس كامل
تتعامل طبقة خادم Nuxt (Nitro) مع مسارات API والوسيط واتصالات قاعدة البيانات والمنطق من جانب الخادم في نفس المشروع مثل الواجهة الأمامية. هذا هو إطار عمل حقيقي بمكدس كامل -- نستخدمه للتطبيقات حيث قد تضيف خادم API منفصل تعقيدًا غير ضروري.
Nuxt مع Headless CMS
يتكامل Nuxt بنظافة مع CMSes بلا رأس: Strapi و Contentful و Sanity و DatoCMS كلها لها وحدات Nuxt رسمية أو مجتمعية. نقوم بتكوين طبقة البيانات وإعداد ISR caching لمسارات المحتوى وربط webhook الـ CMS بمشغل إعادة بناء Nuxt.
هجرات Vue إلى Nuxt
الفرق التي لديها Vue.js SPA موجودة تحتاج SSR لـ SEO غالباً ما تهاجر إلى Nuxt. نموذج المكون متطابق -- الهجرة هي في الأساس إعادة هيكلة التوجيه وإضافة جلب البيانات من جانب الخادم. نتعامل مع هذه الهجرات ونحافظ على كل منطق المكون الموجود.
محرك خادم Nitro
يتعامل محرك Nitro في Nuxt مع عرض من جانب الخادم ومسارات API. إنه غير متعلق بالإطار: يمكن للتطبيق Nuxt نفسه أن ينتشر إلى Node.js أو Cloudflare Workers أو AWS Lambda أو Vercel Edge Functions أو Netlify بدون تغييرات في الكود. هذه مرونة النشر هي ميزة تشغيلية ذات مغزى.
نظام وحدات Nuxt
تضيف نظام وحدات Nuxt القدرات مع تكوين بسيط:
- @nuxt/content: CMS قائم على الملفات باستخدام Markdown/YAML/JSON. مثالي لمواقع التوثيق والمدونات.
- @nuxt/image: تحسين صور تلقائي وتحويل التنسيق والتحميل الكسول.
- @pinia/nuxt: إدارة حالة Pinia، المستوردة تلقائيًا و SSR متوافق.
- @nuxtjs/i18n: التدويل مع توجيه يعتمد على اللغة.
- @nuxtjs/tailwindcss: تكامل Tailwind CSS.
- nuxt-security: رؤوس الأمان وحماية CSRF وتحديد معدل.
نختار ونكون الوحدات بناءً على متطلبات المشروع. لا وحدة في الامتلاء.
Nuxt مقابل Next.js
كلاهما إطار عمل وصفي درجة الإنتاج. الخيار هو في المقام الأول حول معرفة فريقك الحالية وتفضيل Vue مقابل React.
اختر Nuxt عندما:
- يعرف فريقك Vue.js ويفضل نموذج مكونه
- تريد الإعدادات الافتراضية المضمنة مع تكوين أقل
- تقدر نظام وحدات Nuxt لإضافة ميزات سريعة
- تريد عرض هجين بدون تكوين وسيط معقد
اختر Next.js عندما:
- فريقك يقدم React أولاً
- تحتاج إلى React Server Components
- تريد تحسينات Vercel الأصلية
ينتشر كلاهما بنظافة إلى Vercel و Netlify و Cloudflare. لدينا خبرة مع كليهما وسنكون صادقين حول أيهما أفضل لمشروعك المحدد وفريقك.
Common questions
ما الذي يستخدم Nuxt؟
Nuxt هو إطار عمل Vue.js بمكدس كامل يستخدم لمواقع التسويق وتطبيقات الويب ومنصات المحتوى والواجهات الأمامية للتجارة الإلكترونية. توفر مرونة العرض الخاصة به -- SSR و SSG و SPA والعرض الهجين لكل مسار -- جعله مناسبًا للمشاريع التي تتراوح من مواقع التسويق الثابتة إلى التطبيقات المعقدة المصرح بها.
كيف يختلف Nuxt عن Vue العادي؟
Vue.js العادي هي مكتبة مكونات واجهة المستخدم. يلف Nuxt Vue مع توجيه نظام الملفات وعرض من جانب الخادم ومسارات خادم API والواردات التلقائية وخط أنابيب البناء. إنه إطار عمل كامل لبناء تطبيقات ويب الإنتاج وليس فقط طبقة مكون.
هل يدعم Nuxt TypeScript؟
نعم، TypeScript هو من الدرجة الأولى في Nuxt. تم كتابة الإطار نفسه في TypeScript وينشئ أنواعًا تلقائيًا للمسارات والمكونات و composables. نستخدم TypeScript في جميع مشاريع Nuxt.
هل يمكن لـ Nuxt أن يحل محل خادم API منفصل؟
نعم، للعديد من حالات الاستخدام. تتعامل طبقة خادم Nuxt (Nitro) مع مسارات API واستعلامات قاعدة البيانات ووسيط المصادقة والمنطق من جانب الخادم في نفس المشروع. نبني تطبيقات Nuxt بمكدس كامل بدون خادم API منفصل عندما لا يبرر التعقيد ذلك.
أين يمكن نشر Nuxt؟
في أي مكان -- Vercel و Netlify و Cloudflare Workers و AWS Lambda و Node.js VPS أو كتصدير ثابت لأي CDN. يتعامل محرك Nitro في Nuxt مع تكيف هدف النشر. نقوم بتكوين النشر و CI/CD كجزء من كل مشروع Nuxt.
هل يعمل Nuxt مع headless CMSes؟
نعم. Nuxt لديها وحدات رسمية أو مجتمعية لـ Contentful و Strapi و Sanity و DatoCMS و Prismic. نقوم بتكوين تكامل CMS وإعداد ISR caching لصفحات المحتوى وربط webhooks لتشغيل إعادات البناء عند نشر المحتوى.
Ready to get started?
Free consultation. No commitment. Just an honest conversation about your project.
Let's build
something together.
Whether it's a migration, a new build, or an SEO challenge — the Social Animal team would love to hear from you.