I am fighting with a problem in a NextJS app hosted on Heroku.
The issue occurs using a dynamic route, sometime working fine and sometime not working.
I run in one tab of my terminal, under my project directory, this command:
% heroku logs --tail
Then I point my web browser to this address: https://myapp.herokuapp.com/LYS5569npeck and below is what appears in the terminal:
2023-11-21T09:25:56.007746+00:00 heroku[router]: at=info method=GET path="/LYS5569npeck" host=myapp.herokuapp.com request_id=e07614d8-7d4f-4fa4-8329-df52a1ad6731 fwd="60.61.196.208" dyno=web.1 connect=0ms service=18ms status=200 bytes=4417 protocol=https
2023-11-21T09:25:55.998061+00:00 app[web.1]: params={"channel":"LYS5569npeck"}
2023-11-21T09:25:55.998099+00:00 app[web.1]: AudioList-chanlID:LYS5569npeck
2023-11-21T09:25:55.998518+00:00 app[web.1]: models: { Voice: Model { Voice } }
2023-11-21T09:25:55.998584+00:00 app[web.1]: AudioRecorderPlayer-chanlID:LYS5569npeck
2023-11-21T09:25:56.001927+00:00 app[web.1]: audioChunks-theResult:{
2023-11-21T09:25:56.001929+00:00 app[web.1]: _id: new ObjectId('650a74c418ac346c5e237f17'),
2023-11-21T09:25:56.001929+00:00 app[web.1]: channelID: 'LYS5569npeck',
2023-11-21T09:25:56.001930+00:00 app[web.1]: voiceRecordID: '650a74c418ac346c5e237f15',
2023-11-21T09:25:56.001930+00:00 app[web.1]: timeStamp: 1695184068325
2023-11-21T09:25:56.001931+00:00 app[web.1]: },{
2023-11-21T09:25:56.001931+00:00 app[web.1]: _id: new ObjectId('650a74cc18ac346c5e237f1b'),
2023-11-21T09:25:56.001932+00:00 app[web.1]: channelID: 'LYS5569npeck',
2023-11-21T09:25:56.001932+00:00 app[web.1]: voiceRecordID: '650a74cc18ac346c5e237f19',
2023-11-21T09:25:56.001932+00:00 app[web.1]: timeStamp: 1695184076560
2023-11-21T09:25:56.001932+00:00 app[web.1]: }
2023-11-21T09:25:56.001983+00:00 app[web.1]: audioChunks-theResult(JSN):[{"_id":"650a74c418ac346c5e237f17", "channelID":"LYS5569npeck","voiceRecordID":"650a74c418ac346c5e237f15","timeStamp":1695184068325}, {"_id":"650a74cc18ac346c5e237f1b","channelID":"LYS5569npeck","voiceRecordID":"650a74cc18ac346c5e237f19", "timeStamp":1695184076560}]
2023-11-21T09:25:56.002138+00:00 app[web.1]: AudioList-theResult:{
2023-11-21T09:25:56.002138+00:00 app[web.1]: _id: new ObjectId('650a74c418ac346c5e237f17'),
2023-11-21T09:25:56.002138+00:00 app[web.1]: channelID: 'LYS5569npeck',
2023-11-21T09:25:56.002138+00:00 app[web.1]: voiceRecordID: '650a74c418ac346c5e237f15',
2023-11-21T09:25:56.002139+00:00 app[web.1]: timeStamp: 1695184068325
2023-11-21T09:25:56.002139+00:00 app[web.1]: },{
2023-11-21T09:25:56.002139+00:00 app[web.1]: _id: new ObjectId('650a74cc18ac346c5e237f1b'),
2023-11-21T09:25:56.002139+00:00 app[web.1]: channelID: 'LYS5569npeck',
2023-11-21T09:25:56.002139+00:00 app[web.1]: voiceRecordID: '650a74cc18ac346c5e237f19',
2023-11-21T09:25:56.002139+00:00 app[web.1]: timeStamp: 1695184076560
2023-11-21T09:25:56.002140+00:00 app[web.1]: }
2023-11-21T09:25:56.002173+00:00 app[web.1]: AudioList-theResult(JSN):[{"_id":"650a74c418ac346c5e237f17", "channelID":"LYS5569npeck","voiceRecordID":"650a74c418ac346c5e237f15","timeStamp":1695184068325}, {"_id":"650a74cc18ac346c5e237f1b","channelID":"LYS5569npeck","voiceRecordID":"650a74cc18ac346c5e237f19", "timeStamp":1695184076560}]
One can see status=200 (all seems OK) in the logs. And I also see what I expect in the web browser. Beside, in the logs appear messages that I put in my code.
But if I do the following, things go wrong. I can' see why.
Inside my NextJS app I click a link pointing to:
https://myapp.herokuapp.com/LYS5569npeck
(The same link as I used previously) But this time I only see this in the logs (i.e. the terminal running heroku logs --tail):
2023-11-21T09:38:47.672838+00:00 heroku[router]: at=info method=GET path="/LYS5569npeck?_rsc=14isq" host=myapp.herokuapp.com request_id=a28995ac-e6c1-4532-9aee-f29008a4a14f fwd="60.61.196.208" dyno=web.1 connect=0ms service=6ms status=200 bytes=1422 protocol=https
And in the browser I see this (not what I expect):
Application error: a client-side exception has occurred (see the browser console for more information).
Does anyone with more experience using NextJS and Heroku see a way to solve this issue? Or has anybody an idea of how to tackle the problem?