Purpose

The purpose of this tutorial was to solve an issue I faced when deploying a NextJS 14 Tutorial Project to Firebase Hosting. During development and when running the Firebase emulators, NextJS server actions worked and behaved as expected. However, when launched to Firebase Hosting, they no longer work.

When the same app bundle is deployed via Vercel hosting, it works as expected.

Here is the link to the issue on GitHub.

Below are the Tutorials that led to this mini project:

• Full Video Tutorial
  • 1. Project Intro & Basic UI Dev
  • 2. Setup Firebase
  • 3. Configure Firebase Authentication
  • 4. Configure Firestore Database
  • 5. Finalize Firestore CRUD Operations
  • 6. Implement NextJS Server Actions
  • 7. Basic Tailwind CSS
  • 8. Deploy App to Vercel
  • 9. Initial Firebase Deployment
  • 10. Build Firebase/Google Cloud Functions
  • 11. Implement Firebase/Google Cloud Functions & Redeploy to Firebase

NOTE: I kept mentioning serverless functions as if NextJS is not serverless in this scenario when using server actions. They're both serverless scenarios, just different solutions. 🤦🏽‍♂️