I have implemented next-i18next with Next.js in a setup that involves SSR deployed to Firebase functions. I followed the guidelines provided in this documentation https://github.com/i18next/next-i18next
During development, everything functions correctly, as well as in local production mode using next start. All pages render properly and the routing to different locales is effective.
However, upon deployment to Firebase functions (including when running emulators), pages with a specified locale in the URL such as localhost/en route to a 404 error, while localhost/ works as expected.
localhost/ --> functions correctly and displays content in the 'ar' locale
localhost/en --> works only locally, but not when deployed to Firebase functions
localhost/en/<any-page> --> also does not work after deployment
In my next.config.js:
const { i18n } = require('./next-i18next.config');
module.exports = {
i18n,
}
In next-i18next.config.js:
module.exports = {
i18n: {
locales: ['ar', 'en'],
defaultLocale: 'ar',
localeDetection: false,
},
};
For the server.js file (Firebase function setup):
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));
});
Inside the firebase.json configuration:
{
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "nextSsrServer"
}
],
"cleanUrls": true,
},
"functions": {
"source": ".",
"runtime": "nodejs14"
}
}
When I try to redirect using the following code snippet:
const router = useRouter()
...
router.push('/', '/', { locale: 'en' });
Instead of taking me to /en with the locale set to en, it results in a 404 error. Are there any missing steps or configuration oversights that need to be addressed?