Next.js + Firebase Project Setup Guide (with VS Code)

This guide describes the process and tools that I use to create and manage Next.js projects with Firebase and VS Code.

Topics Covered¶

• Installation
• Project Structure
• Multi-Environment Setup (dev & prod)
• Version Control
• Deploying to Vercel
• Debugging

Version Info¶

This guide was created in Aug 2024, using

• Mac OS 14.5
• Visual Studio Code 1.91.1
• Node.js v20.9.0
• Next.js 14.2.5
• Firebase CLI (v13.8.0)

If you run into any breaking changes with a new version, let me know and I'll see about updating the guide!

VS Code Extensions¶

Here are some VS Code extensions I recommend using 👇

• Firebase
• Git Graph
• Prettier Code Formatter
• Tailwind CSS Intellisense
• Task Buttons