Question 119707 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – Next.js dynamic routes not working on production (after page refresh)

I can’t seem to get dynamic routes in Next.js working with Firebase hosting. Everything works fine locally using the emulators, but after deploying the application using firebase deploy the dynamic route is not directly accessible. Instead, I just get redirected to the homepage.

I have carefully read the documententation and walked through the steps as described in https://firebase.google.com/docs/hosting/nextjs.

Steps to reproduce

In this application, users are able to create and join rooms. Each room is a unique entry in a Firebase collection and can be accessed via /rooms/{roomId}. As stated before, everything works well locally. The issue comes after deploying the application (SSR function). I am able to create a room and view the room page after the application redirects me using router.push. However, if I refresh the page or I open up another tab and browse to the URL directly, I see the homepage instead.

It is hard to see as the recording stops right when the page is refreshed. But on the last frame I have joined the room (i.e. /room/IRLdCgdaOOTrIJunCDuv/. If I then refresh the page, the text "Home" (on the first frame) is shown:

chrome-capture-2022-9-26

Project setup

My firebase.json looks as follows:

{
  "firestore": { ... },
  "functions": [ ... ],
  "hosting": {
    "source": ".",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    // I've also  tried using `cleanUrls` and `trailingSlash` but with no luck
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": { ... },
  "database": { ... },
  "emulators": { ... },
  "extensions": { ... }
}

Folder structure:

image

Relevant dependencies in package.json:

{
    "firebase": "^9.12.1",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },

Hoping someone could point me into the right direction.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have found out the issue by running firebase deploy in debug mode. The issue was in the resultingfirebase.json:

    image

    After removing the rewrites attribute in firebase.json the issue was resolved. All requests go pass the ssr function now.


  2. 0

    I had the same issue.

    But in the firebase,json file I didn’t have a rewrites, And i could not find where i could edit the firebase.json on the serverside.

    I also did a firebase deploy –-debug
    And saw that

     "rewrites": [
        {
          "source": "**",
          "function": {
            "functionId": "ssrrsponse366109"
          }
        }
      ],

    was added.
    I checked that function and saw the folling error:

    Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'firebase' imported from /workspace/.next/server/pages/_app.js at new NodeError 
code: 'ERR_MODULE_NOT_FOUND'

    I downloaded the source, and checked the package.json and it was missing firebase dependency

    {
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "js-cookie": "^3.0.1",
    "next": "latest",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "firebase-frameworks": "^0.6.0",
    "firebase-functions": "^3.23.0",
    "firebase-admin": "^11.0.1"
  },
  "main": "server.js",
  "engines": {
    "node": "16"
  }
}

    Did npm i firebase , zipped up the folder again exculding the newly created node_modules folder.
    Edited the function ,uploaded the new zip, deployed the function.

    The error was gone.
    Site worked an could refresh pages other then the homepage.

    It’s a bug in firebase 9 when You use the firebase experiments:enable webframeworks and next.js
    They forgot to add that dependency. The firebase team should solves this issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search