next dynamic routes 404 firebase hosting

Question

Using next.js app deployed on firebase.

I have deployed the app already and using some time.

1. I created a dynamic route page
2. Deployed again app
3. I could access the dynamic page via a router, but once I refresh the page I got a 404 page not found

Solutions that I tried and didn't work:

• Rewrites with dynamicLink true
• Rewrites with destination to the dynamic route and regex / source

"rewrites": [
      {
        "source": "/job/**",
        "destination": "/job/[jobId]/index.html"
      }

• cleanUrls true
• trailingSlash: true plus rewrite config with destination to the dynamic page
• Any many more

I found a ton of solutions for this problem but no one didn't work for me.

Any idea?

firebase.json file:

{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "destination": "out/index.html"
      }
    ]
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run build"]
    }
  ]
}

Answer 1

For dynamic routes to work, you have to use server functions. You can use experimental frameworks feature by Firebase.

Checkout - https://firebase.google.com/docs/hosting/nextjs

Next.js advanced (dynamic) routing does not work without server functions.

Follow these steps:

1. Delete your existing Firebase files and folders such as firebase.json and .firebase etc. And update firebase cli.
2. Enable the web frameworks preview: firebase experiments:enable webframeworks
3. Run firebase init hosting in the root directory of your Next.js app and follow the prompts.
4. Run firebase deploy

Make sure you have paid plan activated so that functions can be creted by firebase-cli.

Option 2: working example

Try following

1. rewrite all routes to index page

"rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]

2. add following code to your index route

...
const router = useRouter();

useEffect(()=>{
    if(location.pathname !== "/")
        router.push(location.pathname)
}, [])
...

Checkout this repo for working example - working example Try navigating to https://byte-ceps.web.app/aboutOrAnything

Improving UX

// pages/index.jsx
import { useRouter } from "next/router";
import styles from "@/styles/Home.module.css";
import { useEffect } from "react";

export default function () {
  const router = useRouter();

  useEffect(() => {
    if (location.pathname === "/") router.push("/home");
    else router.push(location.pathname);
  }, []);

// you can create custom loading animation / splash screen here
  return (
    <div>
      <main className={styles.main}>
        <h1> Loading... </h1>
      </main>
    </div>
  );
}

move your landing page to /home

Option 3:

Deploy on vercel.com Simply create a vercel account and link it to your GitHub. Create project, select your GitHub repo and setup any secrets if you need to. You are done.

If you want to have your .web.app domain, you need to either redirect to vercel deployment from your firebase site or use iframe. But if you have already purchased your own domain name, you can simply setup cname entry and your deployment is ready.

Update

Also in your firebase.json shared in question, rewrite should be to /index.html and not out/index.html

Answer 2

This firebase.json works for me.

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

Answer 3

To properly handle dynamic routes in Firebase hosting, you need to set cleanUrls: false in your firebase.json file and add a rewrite rule to handle all requests to index.html:

The following will handle dynamic request correctly, however if you refresh it will take you to to the home page.

"cleanUrls": false,
"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]

You can fix this issue by adding a static directory rule to your firebase.json file:

"staticDirectory": [
      {
        "source": "/_next/static",
        "destination": "/_next/static"
      }
    ]

Full code:

 // firebase.json
{
  "hosting": {
    "public": "out",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "cleanUrls": false,
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "staticDirectory": [
      {
        "source": "/_next/static",
        "destination": "/_next/static"
      }
    ]
  },
}