CODEWITHSUNDEEP
firebase-hostingnext.js
Heir Of Knowledge
Heir Of Knowledge

Reputation: 627

How to deploy next.js app on Firebase Hosting?

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

Upvotes: 44

Views: 38714

Answers (5)

ishandutta2007
ishandutta2007

Reputation: 18194

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 and 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.

Upvotes: 1

zulqarnain
zulqarnain

Reputation: 1626

Update:

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

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

Upvotes: 0

Monasha
Monasha

Reputation: 1112

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.

Upvotes: 30

Eduardo Montoya Bárcenas
Eduardo Montoya Bárcenas

Reputation: 31

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

Upvotes: 1

ArchNoob
ArchNoob

Reputation: 4126

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

Upvotes: 25

Related Questions