How to deploy Next.js to Firebase Hosting

If you prefer video tutorial, here’s the link to the video:

This guide doesn’t focus on creating next.js app, but since we need some sample app, we need to have something to deploy.

Here’s a command to create latest version of Next.js app in current folder:

If it’s your first time deploying the app you might mess this up, so it’s wise to have a copy without all the firebase packages just in case. Some ideas on where to keep a copy of files:

• Stored in .zip on your computer
• Uploaded on GitHub repo

First, you need to understand Firebase’s structure. Here’s a quick visualisation:

Firebase structure explained

In short: Project can contain multiple assets, like databases, applications (Android app, IOS app and web app) and many other things.

Now that you understad Firebases’s structure:

• Go to firebase console: console.firebase.google.com
• Create a new project
  • choose project’s name
  • choose whether you want to have Google Analytics (if this is a test app, i recommend opting out of this, you can always turn it on later)
• (Ignore this step if you just want to deploy an app as a test) Set up billing for this project. You need to change billing settings from Spark (free) to Blaze (pay as you go). Don’t worry, it will not cost you a penny until you actually start getting a solid user base.
• Add a web app to this project (you can do this from setting or from dashboard)
  • choose app’s name
  • set up Firebase Hosting (check a box)

• Add Firebase SDK
  • run npm install firebase
  • add a unique script provided by firebase at the end of step 2 in a file that runs your scripts or into a separate .js file in “app” folder
• Install Firebase CLI
  • run npm install -g firebase-tools
  • run firebase login , click on a link in terminal and login with your Google Account
  • to make sure that you did it correctly run firebase projects:list and make sure that a project that you created in step 3 is visible in terminal

• Run firebase experiments:enable webframeworks
• Run firebase init hosting
• Answer to questions in terminal by Y or N
  • You are initializing within an existing Firebase project directory - Yes
  • ? Detected an existing Next.js codebase in the current directory, should we use this? - Yes
  • In which region would you like to host server-side content, if applicable? - Choose region that your app will be served at (europe-west1 for me)
  • Set up automatic builds and deploys with GitHub? - No (out of a scope of this tutorial)
  • You should get a message “Firebase initialization complete!”
• Run firebase deploy
• After that you should see “Deploy complete!” in terminal as well as a link to your app.

If you are deploying multiple times, you only need to run:

• Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
• firebase experiments:enable webframeworks
• firebase deploy