Question 214154 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Firebase deploy –only hosting error with next.js latest

I’ve created a next.js project with this command:
npx create-next-app@latest testdemo
And select these options to create:

enter image description here

After that, I’ve run it locally, it works fine,
build is fine too And the build create .next folder and within that, it created the server/app/index.html and many other files too.

then I want to deploy it to firebase hosting, For that I’ve login to firebase console and then

I’ve hit firebase init command
and select these options:

enter image description here

After that, the firebase.json is look like:

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1"
    }
  }
}

Then I run this command:

    firebase deploy --only hosting

The commands works fine, But its the url is showing me this:

enter image description here

I want to know what i’m doing wrong here and why i’m not able to see the next.js application in that url.

I’ve tried to build and deploy the next.js application to firebase hosting but facing few errors.
I’m expecting to get the answer of my question from the experienced person.

Tags:

2

Answers


  1. 0

    A Next.js application needs to run code on the server, which requires the use of Cloud Functions. And since those won’t be deployed when you tell the Firebase CLI to deploy --only hosting, you end up seeing the default welcome page of Firebase Hosting.

    So run firebase deploy without options, or firebase deploy --only hosting,functions.

    Login or Signup to reply.
  2. 0

    You need to use functions if you need servver side code. If you only have a front-end and not using API routes, you can export static site.

    For functions check out – https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting

    For static export, update next.config.js to include output: 'export'

    // next.config.js
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
  // Optional: Add a trailing slash to all paths `/about` -> `/about/`
  // trailingSlash: true,
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search