Let’s deploy a Next.Js app with firebase hosting

Firebase is a platform developed by Google for creating mobile and web applications and it’s making our lives much easier with useful services. I recently started working with firebase and I’m loving it. Today we are going to take a look at firebase hosting and we are going to host a Next.js application. Without further due let’s get started.

What is firebase hosting?

Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices.

Why firebase hosting?

There are some key capabilities of firebase hosting.

• Serve content over a secure connection
• Host static and dynamic content plus microservices
• Deliver content fast
• Emulate and even share your changes before going live
• Deploy new versions with one command

Now that we know about firebase hosting, let’s trying hosting a web app using firebase.

1. Create a firebase account
2. Create a new project

3. Install Firebase CLI tools using the terminal
npm install -g firebase-tools

4. log in to your account
firebase login

5. Go to your project and initiate firebase
firebase init

6. Select firebase hosting and select out as the build folder

7. Update your build script and run npm run build
“build”: “next build && next export”,

8. Finally run firebase deploy — only hosting

Final step

That’s it you successfully deployed your next app in firebase. You’ll get a link like this https://hosting-demo-46342.web.app/ , you can connect a custom domain from the console.

Using the console you can see your build history and usage details.

With that, we came to the end of the article. Don’t forget to check out my other articles as well. See you guys at the next one. Until then stay safe! ✌️

References:

[1]. Firebase.[2021] Docs [Online]. Available at: https://firebase.google.com/docs/hosting [Accessed 28 July 2021]