udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Next.js 14: Чат-приложение в реальном времени на Socket.IO
Next.js 14 Real-Time Chat App using Socket IO
★3.1 (всего оценок - 8)
Продолжительность
12 ч 22 мин
Категория
Next.jsКоличество уроков
77 Видео
Дата добавления
13 нояб. 2024 г., 17:20
Язык
Английский
Дата выхода
2 янв. 2024 г., 01:00
Этот курс познакомит вас с созданием чат-приложения в реальном времени на Next.js 14 и Socket.IO. Мы разберем как новейшие функции Next.js, так и передовые инструменты для создания динамичных приложений.
Технологический стек:
- Изучение новейших возможностей Next.js 14, таких как App Router, Server Actions, Middlewares и др.
- Реализация аутентификации через Clerk.
- Работа с Socket.IO для обеспечения всех функций в реальном времени.
- Деплой Next.js-приложения на Vercel и Node.js-приложения на Render.
- Использование клиентских и серверных компонентов в сочетании.
- Применение Tailwind CSS для настройки стилей Ant Design и создания кастомных компонентов.
Проектные задачи:
- Реализация аутентификации через Clerk для регистрации и входа в систему.
- Отображение списка всех зарегистрированных пользователей для авторизованных пользователей.
- Создание списка чатов с пользователями для возможности общения.
- Поддержка личных и групповых чатов.
- Обновление профиля, добавление и редактирование групп.
- Отображение количества непрочитанных сообщений для каждого чата.
- Интеграция Socket.IO для обеспечения функционала чатов в реальном времени.
- Реализация анимации "печатает" для отображения набора сообщения собеседником.
- Реализация статусов прочтения сообщений.
О Next.js:
Next.js - это мощный фреймворк с открытым исходным кодом для веб-разработки, созданный для построения серверных и клиентских приложений на React. Он поддерживает современные языки, такие как TypeScript и GraphQL, и предлагает множество возможностей, включая маршрутизацию, статический экспорт, разбиение кода и поддержку SEO. Next.js подходит как для статических сайтов, так и для прогрессивных веб-приложений, обеспечивая высокую производительность и доступность.
Присоединяйтесь к этому курсу и создайте чат-приложение в реальном времени с использованием Next.js и Socket.IO, получив ценные знания и навыки работы с современными веб-технологиями!
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:06:59Next App Setup
- Урок 2. 00:04:41Project Folder Structure
- Урок 3. 00:05:17Ant-D Installation
- Урок 4. 00:10:32Overriding Ant-D Components
- Урок 5. 00:02:36Why Clerk
- Урок 6. 00:04:41Clerk Intro
- Урок 7. 00:06:21Auth Components
- Урок 8. 00:04:19Custom Sign-in and Sign-up Pages
- Урок 9. 00:06:05Sign-in and Sign-up Functionalities
- Урок 10. 00:07:22Current User
- Урок 11. 00:04:57Auth Middlewares
- Урок 12. 00:08:40Styling of Signin and Signup Pages
- Урок 13. 00:05:10Mongo Connection
- Урок 14. 00:06:01User Model
- Урок 15. 00:10:35Save Current User
- Урок 16. 00:10:44Layout Structure
- Урок 17. 00:07:27Layout Styling
- Урок 18. 00:18:44Current User Info
- Урок 19. 00:03:12Conditional Layout
- Урок 20. 00:08:40Setup Redux Toolkit
- Урок 21. 00:04:57Save Current User In Redux
- Урок 22. 00:09:19Integrate Firebase
- Урок 23. 00:09:36Upload Profile Picture UI
- Урок 24. 00:18:07Upload Profile Picture Logic
- Урок 25. 00:14:40Architecture Discussion
- Урок 26. 00:09:25Models
- Урок 27. 00:04:11Interfaces
- Урок 28. 00:08:01Chat Layout
- Урок 29. 00:08:29Chat List Header
- Урок 30. 00:10:41Create Chat UI
- Урок 31. 00:11:28Create Chat Server Action
- Урок 32. 00:12:03Create Chat Conditions
- Урок 33. 00:19:21Showing Chatlist
- Урок 34. 00:12:15Selecting Chat
- Урок 35. 00:15:25Recipient Card
- Урок 36. 00:10:35New Message UI
- Урок 37. 00:13:59Send Message
- Урок 38. 00:24:53Show Messages
- Урок 39. 00:06:15Date Time Format
- Урок 40. 00:10:48Update Chat Based On Last Message
- Урок 41. 00:03:27Messages Scroll Issue Fix
- Урок 42. 00:11:51Update Unread Messages
- Урок 43. 00:10:26Clear Unread Messages
- Урок 44. 00:09:42Groups Folder Strucure
- Урок 45. 00:15:37Create Group UI
- Урок 46. 00:11:28Save Group
- Урок 47. 00:17:36Recipient or Group Info
- Урок 48. 00:06:53Edit group -1
- Урок 49. 00:15:55Edit Group - 2
- Урок 50. 00:01:54Chat List Bug Fix
- Урок 51. 00:13:56Loading Issues
- Урок 52. 00:10:48Socket IO Architecture
- Урок 53. 00:04:34Node Setup
- Урок 54. 00:04:43Socket Setup (Server Side)
- Урок 55. 00:08:49Socket Setup (Client Side)
- Урок 56. 00:10:47Socket Client Server Communation
- Урок 57. 00:08:21Logout Functionality
- Урок 58. 00:11:27Showing Online Users
- Урок 59. 00:12:03Sending Real Time Message - 1
- Урок 60. 00:08:51Sending Real Time Message - 2
- Урок 61. 00:07:21Dynamic Scroller For Messages
- Урок 62. 00:16:32Update Chat Based On New Message - 1
- Урок 63. 00:11:07Update Chat Based On New Message - 2
- Урок 64. 00:12:21Typing Animation - 1
- Урок 65. 00:02:58Typing Animation - 2
- Урок 66. 00:11:54Clearing unread counts
- Урок 67. 00:06:42Chatslist Sort Bug Fix
- Урок 68. 00:07:11Groups Users Typing Animation
- Урок 69. 00:14:47Sending Emoji Part - 1
- Урок 70. 00:02:42Sending Emoji - Part 2
- Урок 71. 00:11:02Sending Image Part - 1
- Урок 72. 00:13:00Sending Image Part - 2
- Урок 73. 00:12:33Implement Read Receipts - Part 1
- Урок 74. 00:14:14Implement Read Receipts - Part 2
- Урок 75. 00:07:38Deploy Node App
- Урок 76. 00:10:23Deploy Next JS App
- Урок 77. 00:03:21Bug Fix After Deployment
Автор - udemy
Комментарии