next dynamic routes 404 firebase hosting

Question

Using next.js app deployed on firebase.

I have deployed the app already and using some time.

I created a dynamic route page
Deployed again app
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"]
    }
  ]
}

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
– 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
– Tu Nguyen, Commented Jan 21, 2023 at 4:45
I'm having the same problem. Will post in here if I make any progress. — Eric Russell
– 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
– kingkong.js, Commented Feb 3, 2023 at 15:12

Mayank Kumar Chaudhari · Accepted Answer · 2023-02-04 18:02:30Z

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:

Delete your existing Firebase files and folders such as firebase.json and .firebase etc. And update firebase cli.
Enable the web frameworks preview: firebase experiments:enable webframeworks
Run firebase init hosting in the root directory of your Next.js app and follow the prompts.
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

rewrite all routes to index page

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

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

Option 2 works, but there is that gap when the home page is loading and then switches to the current page. This is not the right solution it's a workaround, so If I don't get a better solution in the next 2,3 days I will accept your solution. Thanks for your answers!

Nutsuda Ploysopond · Accepted Answer · 2023-01-30 18:44:02Z

0

This firebase.json works for me.

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

answered Jan 30, 2023 at 18:44

Nutsuda Ploysopond

112 bronze badges

1 Comment

Mark James Over a year ago

it's not working on my side, with this, redirects me to the index page every time after refresh, it's better than 404, but it's not the solution.

kingkong.js · Accepted Answer · 2023-02-03 22:05:56Z

0

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

edited Feb 3, 2023 at 22:05

answered Feb 3, 2023 at 19:58

kingkong.js

7595 silver badges18 bronze badges

1 Comment

Rajendra A Verma Over a year ago

still not working. all pages are redirected to index.js.

Collectives™ on Stack Overflow

next dynamic routes 404 firebase hosting

3 Answers 3

Option 2: working example

Improving UX

Option 3:

Update

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Option 2: working example

Improving UX

Option 3:

Update

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related