NextJS chat app

بناء تطبيق دردشة في الوقت الفعلي مع Next.js ، ببراعة ، و Vercel

مثال مباشر على: https://next-js-chat-app.vercel.app

دليل خطوة بخطوة على: https://wise.com/blog/realtime-chat-app-nextjs-vercel

هذا تطبيق دردشة تجريبية مع Next.js باستخدام منصة المراسلة.

وصف

يوضح استخدام:

• الحانة/الرسائل الفرعية
• ببراعة هو السنانير
• مصادقة رمزية مع باقتدار

مكدس التكنولوجيا

يستخدم المشروع المكونات التالية:

• Next.js هو إطار رد فعل من Vercel. يتم استخدامه لإنشاء تطبيقات ويب ثابتة مع عرض جانب الخادم ، وظائف بدون خادم واستضافة سلسة. إنه إطار يأخذ معرفة React التي لديك بالفعل ، ويضع بعض الهيكل والاتفاقيات في مكانها.

• ببراعة هي في الوقت الفعلي ، منصة المراسلة الحانة/الفرعية مع مجموعة من الخدمات المتكاملة لتقديم وظائف حقيقية كاملة مباشرة للمستخدمين النهائيين.

• Vercel عبارة عن منصة استضافة ، تم تصميمها من الألف إلى الياء لمستضافة تطبيقات Next.js ، ووظائف بدون خادم معها.

• React هي مكتبة JavaScript لإنشاء واجهات المستخدم مع مكونات مغلفة تدير حالتها الخاصة.

ماذا سنبني؟

واجهة المستخدم للتطبيق سنبنيها مع هذا الإرشاد

سنقوم ببناء تطبيق دردشة في الوقت الفعلي يعمل في المتصفح. سيتم بناؤه على قالب إنشاء next.js next-next ، وسيحتوي على مكون رد فعل سيستخدم ببراعة لإرسال الرسائل وتلقيها. سنقوم أيضًا بكتابة وظيفة بدون خادم next.js والتي سيتم استخدامها للاتصال ببراعة.

بناء وتشغيل محليا

المتطلبات الأساسية

من أجل إنشاء ونشر هذا التطبيق ، ستحتاج إلى:

• حساب باقتدار لإرسال الرسائل: قم بإنشاء حساب باستخدام Austly مجانًا.
• حساب Vercel للاستضافة على الإنتاج: قم بإنشاء حساب مع Vercel مجانًا.
• العقدة 16 أو أكثر: تثبيت العقدة.

ستحتاج أيضًا إلى مفتاح API من باقتدار للمصادقة مع الخدمة باقتدار. للحصول على مفتاح API ، بمجرد إنشاء حساب باقتدار:

1. قم بزيارة لوحة معلومات التطبيق الخاصة بك وانقر فوق "إنشاء تطبيق جديد".
2. امنح التطبيق الجديد اسمًا.
3. انسخ مفتاح API الخاص بمجرد إنشاء التطبيق. احتفظ بها آمنًا ، هذه هي الطريقة التي ستصل بها مع الخدمة باقتدار.

بناء المشروع

1. لتشغيل هذا المشروع محليًا ، شوك هذا الريبو وإنشاء ملف يسمى .env في جذر المشروع الذي يحتوي على مفتاح API الخاص بك:

ABLY_API_KEY=your-ably-api-key:goes-here

2. تشغيل npm install .
3. تشغيل npm run dev .

سوف يدور خادم Dev Next.js وسترى تطبيق دردشة تجريبية.

استضافة على Vercel

نحن نستخدم Vercel كخادم تطوير الخاص بنا ونبناء خط أنابيب.

أسهل طريقة لنشر next.js إلى الإنتاج هي استخدام منصة Vercel من منشئي Next.js. Vercel عبارة عن منصة All-In-One مع Global CDN تدعم نشر Static & Jamstack وظائف بدون خادم. - وثائق Next.js

من أجل نشر تطبيق الدردشة الجديد على Vercel ستحتاج إلى:

1. إنشاء حساب github (إذا لم يكن لديك بالفعل واحد)
2. ادفع تطبيقك إلى مستودع github
3. إنشاء حساب Vercel
4. قم بإنشاء تطبيق Vercel جديد واستيراد تطبيقك من مستودع GitHub الخاص بك. (سيتطلب منك ذلك تفويض Vercel باستخدام حساب GitHub الخاص بك)
5. أضف ABLY_API_KEY كمتغير للبيئة
6. شاهد تطبيقك ينشر
7. قم بزيارة عنوان URL الذي تم إنشاؤه حديثًا في متصفحك!

اجعلها خاصة بك

هناك بعض الطرق التي يمكن بها تمديد هذا المثال:

أضف تاريخ الرسالة

لا يوجد حاليًا سجل دردشة في هذا العرض التوضيحي ، سترى فقط الرسائل التي تأتي بعد الانضمام إلى الدردشة. يمكنك توسيع هذا العرض التوضيحي باستخدام ميزة الترجيع الخاصة ببراعة لمدة تصل إلى دقيقتين من التاريخ مجانًا ، أو مع حساب مدفوع ، لمدة تصل إلى 48 ساعة تقريبًا.

أضف أسماء المستخدمين

لا توجد أي أسماء مستخدمة يتم إرسالها مع رسائل الدردشة. يمكن تمديد هذا العرض التوضيحي لتقديم مربع إدخال اسم المستخدم ، وإضافة اسم المستخدم الحالي إلى الرسائل عند إرسالها.

يستخدم العرض التوضيحي معرف العميل الذي تم إنشاؤه بشكل عشوائي كمعرف فريد - وهو ما يمكن أن يكتشف ما إذا كان "أنا" أو "شخص آخر" أرسل الرسالة.

مزيد من المعلومات

• انضم إلى خادم Discord
• تابعنا على Twitter
• استخدم SDKs لدينا
• قم بزيارة موقعنا على الويب

---