đ Key Learning Outcomes
- Understanding Next.js Best Practices: learning to build fast, maintainable apps.
- Implementing Server-Side Rendering (SSR) techniques.
- Efficiently connecting and retrieving data using Fauna.
- Implementing real-time updates with Fauna Streams.
- Securing a chat app with basic authentication.
đ¨âđĢ About the Course
Dive into the world of real-time, full-stack web development with this hands-on course. Learn to build a chat application using Fauna Streams and Next.js 14, focusing on essentials and best practices. By the end, you'll have a working real-time chat app and a solid grasp of the tools and techniques used to build it.
đ¯ Target Audience
- Ideal for developers with some experience in web development looking to enhance their skills in real-time applications and full-stack development.
â Requirements
- Basic knowledge of JavaScript and web development concepts.
- Familiarity with React and API integration.
đ Course Content
- Set up a Next 14 Project with create-next-app.
- Initialize and Configure a Fauna Database inside a Next.js project with fauna-shell.
- Create a Fauna Room Collection in Next.js with the fauna Client.
- List Available Chat Rooms in Real-time in Next.js from Fauna.
- Create Dynamic Routes in Next.js for Chat Rooms.
- Explore Faunas one-to-many Relationships between Collections in the Terminal.
- Create and Display Messages using Fauna within a Room in Next.js.
- Stream Chat Messages in Real-time in Next.js from Fauna.
- Understand Server and Client Rendering and Data-fetching.
- Refactor a Next.js 14 Page to Utilize Both Server and Client-side Rendering.
- Add Fauna User Authentication to a Next.js App.
- Implement Signup Functionality through Fauna with Next.js 14 Server Actions.
- Implement Fauna Signin with Next.js Server Actions and useFormState React Hook.
- Implement Auth Guards with Tokens throughout an Next.js App.
- Update Fauna Messages Collection with Authors.
- Challenge: Implement a NavBar for the Application with Logout Functionality.
Drop a comment
Build a Real-time Next.js 14 Chat App with Fauna by Shadid Haque
Log in to leave a feedback
Loginđ Psst! Interested in More Next.js Courses?
Server-Side GraphQL in Next.jsVideo
by Scott Moss
đšī¸ Levels: đ Intermediate
âŗ Duration: 3.5 hours
đ¤ Price: Subscription
đ§âđģ Learning Platform: Frontend Masters
Headless CMSs with Next.jsVideo
by Scott Moss
đšī¸ Levels: đ Intermediate
âŗ Duration: 3.5 hours
đ¤ Price: Subscription
đ§âđģ Learning Platform: Frontend Masters
Build a Full-Stack App with PrismaVideo
by Xiaoru Li
đšī¸ Levels: đą Beginner, đ Intermediate
âŗ Duration: 0.5 hours
đ¤ Price: Free
đ§âđģ Learning Platform: Egghead.io