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
Дата обновления
29 апр. 2026 г., 21:48
Освойте создание современного чат-приложения на базе Next.js 14 и Socket.IO, углубившись в ключевые особенности App Router, серверные компоненты и реалтайм-взаимодействие. Этот курс поможет вам укрепить навыки работы с передовыми веб‑технологиями и создать полноценный динамический проект с нуля.
Что вы изучите в этом курсе
Курс шаг за шагом проведет вас через ключевые элементы разработки современного приложения на Next.js 14, включая работу в реальном времени, аутентификацию и деплой.
Современный технологический стек
- Глубокое погружение в App Router, Server Actions, Middleware и другие возможности Next.js 14.
- Реализация аутентификации с помощью Clerk.
- Интеграция Socket.IO для обмена сообщениями в реальном времени.
- Деплой фронтенда на Vercel и backend‑сервера на Render.
- Комбинация клиентских и серверных компонентов для оптимизации производительности.
- Использование Tailwind CSS и кастомизация стилей Ant Design.
Практический проект: чат в реальном времени
Вы создадите полноценное чат-приложение, применяя полученные знания на практике.
Основной функционал
- Регистрация и вход через Clerk.
- Просмотр списка всех зарегистрированных пользователей.
- Создание и управление списком чатов.
- Поддержка личных и групповых чатов.
- Редактирование профиля и управление групповыми комнатами.
- Подсчет непрочитанных сообщений для каждого чата.
- Статусы прочтения сообщений.
Функции в реальном времени
- Отправка и получение сообщений без перезагрузки страницы.
- Индикация «печатает…», созданная на базе Socket.IO.
- Мгновенное обновление чатов для всех участников.
Введение в Next.js 14
Next.js — это фреймворк для создания клиентских и серверных приложений на React, поддерживающий TypeScript, современную маршрутизацию, гибкое рендеринг-поведение и встроенную оптимизацию SEO. Он идеально подходит для динамических приложений, требующих высокой скорости, производительности и масштабируемости.
Пройдя этот курс, вы не только освоите фундаментальные и продвинутые возможности Next.js, но и создадите реальный проект, который можно использовать в портфолио.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 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
Комментарии