43

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

2
  • 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: nextjs.org/learn/excel/static-html-export Apr 13, 2020 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, vercel.com/blog/zeit-is-now-vercel ) Sep 12, 2020 at 17:26

5 Answers 5

29

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.

1
  • 3
    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 that does work with hooks. Aug 18, 2020 at 2:36
26

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

1
  • 1
    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' } }; ``` Apr 13, 2020 at 19:26
1

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

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

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

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.

1

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.