Subdirectory as "/blogs" on firebase? - reactjs

Question

Is it possible to add a NextJs app as a subdirectory to a ReactJs app on firebase hosting? I have the main app already deployed to firebase with a domain and I want to add a NextJs app to its subdirectory "/blogs" for SEO purposes. Is this possible? If yes how? I have tried rewrites but did not get any success.
Update
I managed to make it work a little with the following:
The directory:
.
+-- _projectFolder
| +-- firebase.json
| +-- .firebaserc
+-- Reactjs Files...
+-- nextApp
| +-- server.js
| +-- Nextjs files...
firebase.json:
"hosting": [
{
"target": "blog",
"public": "./nextApp/public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "nextServer"
}
]
},
{
"target": "main",
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "/blogs/**",
"function": "nextServer"
},
{
"source": "/blogs",
"function": "nextServer"
}
]
}
],
"functions": {
"source": "./nextApp",
"runtime": "nodejs16"
}
}
The code for the server.js
const { https } = require("firebase-functions")
const { default: next } = require("next")
const isDev = process.env.NODE_ENV !== "production"
const nextjsDistDir = require("./next.config.js").distDir
const server = next({
dev: false,
//location of .next generated after running -> yarn build
conf: { distDir: nextjsDistDir },
})
const nextjsHandle = server.getRequestHandler()
exports.nextServer = https.onRequest((req, res) => {
return server.prepare().then(() => {
return nextjsHandle(req, res)
})
})
/*
firebase-admin,firebase-functions
require these plugins, install them
*/
The next.config.js has a basePath of basePath: "/blogs"
The only problem now is somehow the next.config.js is not being detected when the build is live on firebase. None of the Image domains or the basePath is working there, these work fine locally, is there any change I need in the server.js file?

Answer 1

Actually the config seems to be fine. You can only add a /** for taking all requests.
{
"hosting": {
"target": "main",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/blogs/**",
"destination": "/nextApp/index.html"
}
]
}
If this is a nextjs app i would suggest to check that you set the base path correctly -> documentation

Answer 2

If you would like to use multiple different frameworks in one project you might want to consider using Astro.
This video by Fireship explains Astro really well.