Udemy

Pro NextJS & TypeScript – Ultimate Social Media App

立即報名
  • 204 名學生
  • 更新於 9/2025
4.5
(27 個評分)
CTgoodjobs 嚴選優質課程,為職場人士提升競爭力。透過本站連結購買Udemy課程,本站將獲得推廣佣金,有助未來提供更多實用進修課程資訊給讀者。

課程資料

報名日期
全年招生
課程級別
學習模式
教學語言
英語
授課導師
Van Nguyen
評分
4.5
(27 個評分)
3次瀏覽

課程簡介

Pro NextJS & TypeScript – Ultimate Social Media App

Build a modern social media app with Next.js, React Query, Redux & Socket IO – real-time chat, posts, likes & more.

Want to build a real-time social media app with modern tools like NextJS, React Query, and Socket IO? This course is for you.

In this hands-on project-based course, you’ll build the frontend of a full-featured social media platform from scratch. You’ll implement real-time features such as live chat, reactions, and friends using WebSockets (Socket IO). With React Query, you’ll master efficient data fetching, caching, pagination, and optimistic updates to provide a smooth user experience.

We’ll use NextJS App Router, Material UI, and TypeScript to build clean, scalable, and modern UI components. You’ll also implement core social media features like posts, likes, comments, and friends systems with a fully interactive UI.

Whether you’re an intermediate developer looking to build your portfolio or a React developer aiming to learn advanced tools and patterns — this course will guide you step by step.

Another major focus is React Query—one of the most powerful and widely-used libraries for handling server state in modern React apps. You’ll learn how to effectively use it for fetching, caching, and mutating data, along with advanced techniques like:

  • Optimistic updates for instant UI feedback

  • Infinite scrolling for dynamic feed loading

This course isn’t just about building a project—it’s about understanding when, why, and how to use the right tools for building fast, scalable, and real-time frontend applications.

Note: This course does not focus heavily on Server Components, as we are building a social media app—a type of application where data changes frequently and requires real-time updates. Instead, we prioritize the tools and techniques best suited for highly dynamic, interactive user experiences.

課程章節

  • 10 個章節
  • 208 堂課
  • 第 1 章 Introduction
  • 第 2 章 WebSockets Fundamental
  • 第 3 章 WebSockets in Practice
  • 第 4 章 Socket.IO
  • 第 5 章 Next.js Fundamental: Core Concept
  • 第 6 章 Next.js Fundamental: Server Action
  • 第 7 章 Next.js Fundamental: Cache
  • 第 8 章 Setup: Component UI Library, Redux Toolkit, Tanstack React Query, Axios
  • 第 9 章 Authentication with Json Web Token
  • 第 10 章 Feature: Post

課程內容

  • Implement real-time features using WebSockets (Socket IO) for live chat, friends, and more.
  • Create a powerful authentication system with JWT, and protected routes.
  • Optimize performance with infinite scrolling, pagination, and query caching using React Query.
  • Implement likes, comments, friends, conversations, and other key social features.
  • Manage global and per-page state cleanly with Redux and React Query
  • Optimize user experience with optimistic updates, and loading states

評價

  • M
    Misa Pop
    5.0

    very practical course

  • G
    Gil Atkins
    5.0

    The project was really impressive. I learned a lot in just the first few sections, I especially liked how the instructor used React Query in the project.

立即關注瀏覽更多

本網站使用Cookies來改善您的瀏覽體驗,請確定您同意及接受我們的私隱政策使用條款才繼續瀏覽。

我已閱讀及同意