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 DEV.to 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.
NEXTFIRE LIVE DEMO

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 . When you reach a paid module, you will be asked to pay for a single course or upgrade to PRO.

Chapters​

Prerequisites​

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

App​

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

Users​

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

SSR​

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

Hearts​

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

Deploy​

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

Spoiler: Decryption Key

You don't have permission to view the spoiler content. Log in or register now.