Fireship – Next.js (v12.0) Firebase Full Course


Next.js Firebase Full Course​

You will build a full-stack Social Blogging Platform inspired by sites like and Medium. Authors can create content under their custom username, then publish publicly with SEO-friendly rendering, while readers can heart or like posts in realtime. Featuring…

  • 👨‍🎤 Custom Firebase usernames
  • 📰 Bot-friendly content (SEO)
  • Advanced SSR, SSG, and ISR techniques
  • Firestore realtime CRUD and data modeling
  • Reactive forms with react-hook-form
  • Image file uploads
  •  Realtime hearts
  •  Security & Deployment

 Is this Course Right for Me?​

This course is intermediate level and will challenge you to build an app that delivers high-performance and search engine visibility via server-side rendering. It assumes you have at least basic knowledge of web programming with familiarity of JavaScript, HTML, and CSS. It is fast-paced and similar to my style on YouTube, but far more in-depth and followed in a long linear format.

 Test drive​

Visit the demo app and give it a test drive before you enroll.

When was the course last updated?​

Updated Oct 27th, 2021 Next v12.0

How do I enroll?​

The first few videos are free, so just dive in . Decryption Key “R3yzcN5Hpna4lsBR1lX9Cg” When you reach a paid module, you will be asked to pay for a single course or upgrade to PRO.



1 READMEWatch this video before starting the course!

2 React BasicsLearn the fundamentals of React.js and reactive UI development

3 Firebase BasicsLearn the fundamentals of Firebase Authentication, Firestore, and Storage

4 Next.js BasicsLearn the fundamentals of Next.js and server-side rendering


5 Technical OverviewBlueprint and technical decisions behind the app

6 Next.js SetupSetup a Next.js app and explore the file system

7 TypeScriptSetup Next.js with TypeScript (optional)

8 Firebase SetupInstall and configure Firebase in a Next.js project

9 RoutingManage dynamic routing and links in Next.js

10 LoaderCreate a loading spinner to manage loading states across the app

11 NavbarCreate a dynamic navigation bar with React

12 ToastUse react-hot-toast to trigger animated toast messages


13 Auth IntroTechnical overview of Firebase Auth with custom usernames

14 Google SignInAuthenticate via OAuth with Google SignIn

15 Auth ContextManage the global auth state with the React Context API

16 Auth HookJoin Firestore data to the current user with a custom react hook

17 Custom UsernamesAdd custom usernames to Firebase users and asynchronously validate uniqueness


18 SSR & SEO in NextTechnical overview of server-side rendering and SEO

19 Data ModelHow to model data relationships between users, posts, and hearts

20 SSR User Profile PageImplement server-side rendering to fetch data on the server

21 SSR + Paginated Home Page FeedRender a feed of the latest posts with a collectionGroup query

22 ISR Incremental Static RegenerationUse incremental static regeneration (ISR) to rebuild pages on the fly

23 Realtime Data HydrationTransition or hydrate server-rendered content to a realtime stream of data from Firestore

24 Custom 404 PageRender a custom 404 page for dynamic pages that do not exist.

25 Metatags for SEOGenerate dynamic metatags for search engine optimization and social linkbots

CRUD Features​

26 Admin PagesCreate an AuthCheck component to render content for signed-in users

27 Create Data with FirestoreCreate a new post document in Firestore with a custom slug ID

28 Post Editing FormUse react-hook-forms to create a form to edit posts in markdown

29 Form ValidationAdd form validation with react-hook-forms

30 Image UploadsCreate an image file uploader with Firebase storage


31 Hearts, Likes, ClapsCreate a many-to-many relationship where users can heart many posts


32 Backend SecurityUse Firestore Rules to ensure features are secure across the entire stack

33 Vercel DeploymentDeploy the app with continuous integration on Vercel

34 Firebase DeploymentDeploy the app to Firebase hosting


Page url

(Descryption Key on description find it by yourself)

Leave A Reply

Your email address will not be published.