Best Frontend Courses LogoBest Frontend Courses
    • AI
    • Accessibility
    • Algorithms
    • Angular
    • Architecture
    • Astro
    • Auth
    • CSS
    • Firebase
    • Game Development
    • Gatsby
    • Git
    • GraphQL
    • HTML
    • Ionic
    • JavaScript
    • Jotai
    • MobX
    • Native
    • Netlify
    • Next.js
    • Nx
    • Performance
    • Prisma
    • React
    • React Native
    • Redux
    • Remix
    • Rx.js
    • SCSS/Sass
    • SolidJS
    • Storybook
    • Supabase
    • Svelte
    • Tailwind
    • Testing
    • TypeScript
    • Vue.js
    • XState
    • jQuery
    • p5.js
  • Add Course
  • Login

Copyright Š 2025Best Frontend Courses. All rights reserved.

  • Categories
  • Instructors
  • Terms of Service
  • Privacy Policy
  • Feedback
  1. Home
  2. Next.js
  3. Build a Real-time Next.js 14 Chat App with Fauna
Next.js / React
Video

Build a Real-time Next.js 14 Chat App with Fauna

by Shadid Haque
Enroll
đŸ•šī¸ Levels: 😎 Intermediate
âŗ Duration: 1 hours
🤑 Price: Free
🧑‍đŸ’ģ Learning Platform: Egghead.io
🧑‍🎓 Certificate: No

🔑 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.
Update Course

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?

Next.jsNext.js

Headless CMSs with Next.js
Video

by Scott Moss

đŸ•šī¸ Levels: 😎 Intermediate

âŗ Duration: 3.5 hours

🤑 Price: Subscription

🧑‍đŸ’ģ Learning Platform: Frontend Masters

Next.jsNext.jsReactReactTypeScriptTypeScript

Fundamental Next.js API and Patterns
Video

by Lazar Nikolov

đŸ•šī¸ Levels: 🌱 Beginner

âŗ Duration: 1.5 hours

🤑 Price: Subscription

🧑‍đŸ’ģ Learning Platform: Egghead.io

Next.jsNext.js

Next Migration Course Extras
Video

by Ben Patton

đŸ•šī¸ Levels: 😎 Intermediate

âŗ Duration: 0.5 hours

🤑 Price: Free

🧑‍đŸ’ģ Learning Platform: Egghead.io

🔙 Back to Next.js Category