NextJS with next-i18next and Firebase functions routes all pages to 404 when locale in url path

I'm using next-i18next with Next.js (Deploying SSR to Firebase functions) and I followed the documentation here https://github.com/i18next/next-i18next

And it all fine in development mode, and even in production mode locally using next start, all pages works fine and routing to other locales works fine.

But when deployed to firebase functions (also when running emulators) all pages with locale specified in url localhost/en routes to 404, but localhost/ works fine.

localhost/ --> works fine and shows locale 'ar'
localhost/en --> works only locally, but not when deployed to firebase functions
localhost/en/<any-page> --> not working also when deployed.

next.config.js:

const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
}

next-i18next.config.js:

module.exports = {
  i18n: {
    locales: ['ar', 'en'],
    defaultLocale: 'ar',
    localeDetection: false,
  },
};

server.js (firebase function):

const functions = require('firebase-functions');
const { default: next } = require('next');

const app = next({
  dev: false,
  conf: { distDir: '.next' },
});

const handle = app.getRequestHandler();

exports.nextSsrServer = functions
  .runWith({
    memory: '1GB',
  })
  .https.onRequest(async (req, res) => {
    return app.prepare().then(() => handle(req, res));
  });

firebase.json:

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "nextSsrServer"
      }
    ],
    "cleanUrls": true,
  },
  "functions": {
    "source": ".",
    "runtime": "nodejs14"
  }
}

so basically calling this:

const router = useRouter()
...
router.push('/', '/', { locale: 'en' });

it will route to 404, it should route to /en and set locale to en correctly.

is there a step missing, or some configuration?