Next.js Firebase 除索引外的所有主机都出现 404 错误。html

Question

I've built a nextjs app, with npm run build && npm run export and deployed to firebase using firebase deploy command. Prior to that, I've used firebase init in my project folder with just using the default options eg. not a single page application.

After I go and visit my project in firebase provided url however, I see the home page which is index.html, but whenever I use any other slug it throws a 404. Why this is happening? I`ve included my firebase.json file, in case it might help.

firebase.json

  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Answer 1

With the rules you have Firebase Hosting serves the exact file that the user requested.

To rewrite other/all URLs to your index.html , you'll need to add a rewrite rule to your firebase.json . A typical rewrite rule for single-page applications may look like this:

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

Answer 2

For everybody that wants to deploy a statically exported Next.js app to Firebase hosting:

You would have to add "cleanUrls": true to the hosting configuration in firebase.json like so:

"hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },

Without the "cleanUrls" configuration, the user would have to navigate to https://example.com/login.html so that Next.js routes to the login page for example. With the parameter, a web request to https://example.com/login would work.

Answer 3

If anyone is still looking for this, this is what fixed it for me:

I used dynamicLinks as stated in the firebase hosting docs for the rewrites like so in my firebase.json file:

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "/**", 
        "dynamicLinks": true
      }
    ]
  }
}

This should allow dynamicLinks to start at ("https://CUSTOM_DOMAIN/{dynamicLink}").