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"]
    }
  ]
}

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"]
    }
  ]
}

• javascript
• reactjs
• firebase
• next.js
• firebase-hosting

Share Improve this question Follow edited Feb 1, 2023 at 7:43 Mayank Kumar Chaudhari 18.9k1313 gold badges7272 silver badges155155 bronze badges asked Jan 6, 2023 at 15:58 Mark JamesMark James 57866 gold badges2020 silver badges5252 bronze badges 5

• It would be helpful if you show the code that isn't working the way you expect, and the specific steps you take to reproduce the error with that. We should be able to copy what you have and observe the result. – Doug Stevenson Commented Jan 6, 2023 at 16:13
• I have the same problem. Dynamic routes don't work, no matter the config I use for Firebase Hosting. – Tu Nguyen Commented Jan 21, 2023 at 4:45
• 2 I'm having the same problem. Will post in here if I make any progress. – Eric Russell Commented Feb 1, 2023 at 1:21
• What version of Firebase CLI do you have installed? And do you have billing enabled? – kingkong.js Commented Feb 3, 2023 at 15:12
• latest version, yes I have billing enabled – Mark James Commented Feb 3, 2023 at 23:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +500

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

Checkout - https://firebase.google./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. 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

This firebase.json works for me.

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

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"
      }
    ]
  },
}