How to deploy next.js app on Firebase Hosting?

Question

I am trying to deploy next.js app on Firebase hosting. But I don\'t understand which files to push to the server. When I run npm run build and pushed the build fold

Answer 1

Check this out first. This is the official example provided by the next.js in their github repo.

The idea behind the example

The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL. Each individual page bundle is served in a new call to the Cloud Function which performs the initial server render.

This is based off of the work at https://github.com/geovanisouza92/serverless-firebase & https://github.com/jthegedus/firebase-functions-next-example as described here.

PS : I know posting links as answers is not the best way, but my rep power is not enough to put this as a comment.

---

Update

I recently found out that firebase git repo has a nextjs example, be sure to check this out too. Path in the repo => firebase/functions-samples/nextjs-with-firebase-hosting

Answer 2

On package.json you need to add npm scripts for building and exporting like.

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },

And then you can run

npm run build && npm run export

Next build will build your project for shipping and export will put your files ready for hosting on a static hosting server (like firebase hosting).

npm run export

will create an out/ directory and place all your files there ready for uploading.

Note:

If your app needs to generate dynamic pages at the runtime, you can't deploy it as a static app.

Read more