I am facing an issue with dynamic routes.
This is the file structure that I have set for the relevant part of my problem:
app
members
[memberID]
page.tsx
After running:
% npm run dev
And pointing my web browser to this URL:
http://localhost:3000/members/AA66HB97
I see my app running as I expect.
But on the other hand after running:
% npm run build
% firebase deploy --only hosting
And pointing my web browser to this URL:
https://myapp.web.app/members/AA66HB97
I no longer see what I expect. But I get this:
404 | This page could not be found.
What could I be missing for the app not working ?
Note that beside this, the app works fine both locally and on the server.
I am using next version 13.3.1.
In case this might be useful below is the contents of the page.tsx file.
import firebase from "../../../firebase/initFirebase";
import DrillManage from '../../components/drillMng'
interface pageProps {
params: {
memberID: string
}
}
export default async function MemberPage({ params: { memberID } }: pageProps) {
const member = await getMemberData(memberID)
return (
<div className='colnLst'>
<DrillManage usrID={JSON.parse(member.userID)} />
</div>
)
} /* End of MemberPage */
async function getMemberData(id:string) {
let dbRef = firebase.database().ref('Members'),
resultStr = ''
await dbRef.child(id)
.once('value', (snapshot) => {
if (snapshot.hasChildren()) {
snapshot.forEach((item: firebase.database.DataSnapshot) => {
resultStr = JSON.stringify(item)
})
}
})
return {
id,
memberID: id,
userID: resultStr
}
} /* End of getMemberData */
