Build a chat app for both dev and production environment is always a challenging task. In this tutorial, I will show you how to configure next.js 15 project with socket.io and build a real time live chat application in which user can create rooms and with other users who ever join that room. It includes best practice of configurations for typescript and more.
00:30 Demo of ChatApp in Next.js 15
03:55 Create new Next.js 15 project
05:10 More Next.js Tutorials
08:00 UI/UX of Chat App
23:50 Handle States of Chat App
28:40 Install socket packages and add script
31:15 Build socket.io server
37:50 Configure typescript for dev and prod
46:30 Socket on client components
59:20 Configure Chat app for production
#chatapp #nextjschatapp #nextjssocketio #realtimechat
Follow Whatsapp Channel:
https://whatsapp.com/channel/0029Va7yDtdKmCPVHT30ya3A
React tutorials:
https://www.youtube.com/playlist?list=PL3i9po_eXL_ry_n5DZ30aEHazNCWdOUz7
JavaScript Tutorials and Projects:
https://www.youtube.com/playlist?list=PL3i9po_eXL_rwqWg1yPGBFKFZWqjaCTZe
Angular Tutorials:
https://www.youtube.com/watch?v=Qts7H8P-FpI&list=PL3i9po_eXL_qZ4PNvMUcHBERa2m9QRFo1&pp=gAQBiAQB
Docker Tutorials & CI/CD:
https://www.youtube.com/playlist?list=PL3i9po_eXL_rej_oo1FyL3D7q1AewarfJ
Angular 16 Crash Course For Beginners:
https://www.youtube.com/playlist?list=PL3i9po_eXL_orh8YJcdGNO0C6P2mHABT7
Tech Tutorials - Random:
https://www.youtube.com/watch?v=IYRrE-yikb0&list=PL3i9po_eXL_pKCqB5J5KoRdR-4uebo1r-
Complete Next.js 13 Tutorials: https://www.youtube.com/playlist?list=PL3i9po_eXL_paQQIa4qTum7_9CPqQwiFH
Next.js 14 Tutorials:
https://www.youtube.com/playlist?list=PL3i9po_eXL_pyNKBtAAK_gVBWG5d8yZS9
Next.js Tutorials:
https://www.youtube.com/playlist?list=PL3i9po_eXL_oHRV-wTND_gfi4X40wELTi
Node Express MongoDB Bootcamp: https://www.youtube.com/playlist?list=PL3i9po_eXL_rdDdgVHSZjmzvwUB-jj8SU
ChatGPT Tutorials: https://www.youtube.com/playlist?list=PL3i9po_eXL_qtCoSV1GHX_5Q48D2La9xW
Join our facebook group:
https://www.facebook.com/groups/996305460498149/
Contact us for development services:
https://www.linkedin.com/in/umair-jameel-24aa5368/