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 folder to firebase. But gives error that No index.html file found.

Here is the image of output of build folder. I have just created a simple component for testing purposes.

Output of build command

Firebase Hosting only accepts static files. NextJS is an NodeJS server running, so you need to deploy it on Zeit Now or Google Cloud platform. In case you have a simple app, you can export it to a static HTML web page and upload the exported files. See more on the official documentation: https://nextjs.org/learn/excel/static-html-export — Frederiko Ribeiro, Apr 13 '20 at 19:31
@FrederikoCesar the official documentation is weird though. You want firebase hosting to serve all the static content, and Cloud Functions for Firebase to serve the dynamic content. (And for people confused about "ZEIT" - that's the old company name for Vercel, https://vercel.com/blog/zeit-is-now-vercel ) — James Moore, Sep 12 '20 at 17:26

score 29 · Answer 1 · edited Jan 08 '22 at 07:27

Check this out first. This is the official example provided by the Next.js team 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 and 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.

In case anyone else reads this, the example in the update doesn't work with React Hooks. The author has created an [updated simplified version here](https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs) that does work with hooks. — Matt Waldron, Aug 18 '20 at 02:36

score 26 · Answer 2 · answered Sep 30 '19 at 06:59

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.

In this case, if your app has more pages, you need to also configure the file called next.config.js in the root directory and add the pages there so you can access it normally. For example: ``` const paths = { '/': { page: '/' }, '/about': { page: '/about' } }; ``` — Frederiko Ribeiro, Apr 13 '20 at 19:26

score 1 · Answer 3 · answered Sep 10 '21 at 03:00

On package.json you need to modify build scripts.

"build": "next build && next export",

and on next.config.js you need to modify

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    loader: "imgix",
    path: "https://noop/",
  },
  reactStrictMode: true,
}

execute npm run build and generate folder /out

score 0 · Answer 4 · answered Jul 25 '23 at 13:11

0

Update:

Found the below docs, using that I deployed my Nestjs App without any extra command.

https://firebase.google.com/docs/hosting/frameworks/nextjs

answered Jul 25 '23 at 13:11

zulqarnain

1,536
4
26
44

Documents that it supports Next.js 13.4.7 too, whereas the Next team's repo is 9.x – Dave A-W Aug 19 '23 at 01:44

ishandutta2007 · Answer 5 · 2023-08-28T07:49:25.107

An update on ArchNoob's answer:

As of Next.js v13.4.19,next export is no longer needed, next build would suffice if you just have output in next.config.js like this:

const nextConfig = {
  output: 'export'
};

Further Upadate:

If want to build + export to out folder, then understand the routing and configure as per what Monasha said it's cool, it will be a good learning. But there is a new feature released from firebase hosting for lazy people like me, it solves all these on it's own, you don't need to bother about export folder nor directory structure. You just have to do firebase experiments:enable webframeworks Once it detects the current directory as a nextjs project it will do all those on its own. You just do firebase deploy after that and you are done. More details : here

Now firebase hosting for nextjs is at par with vercel or netlify.

How to deploy next.js app on Firebase Hosting?

5 Answers5

Linked