Dynamic route not working on NextJS, when linked from inside the app

Question

I have now been facing this problem for a couple of days in a NextJS app hosted on Heroku.

First of all this link which points to a dynamic route inside the app is accessible when I paste it directly in the web browser:

https://myexampleapp.herokuapp.com/LYS5569npeck

I tried it successfully on Brave, Firefox and Safari.

But things go wrong when I want to access this same link from inside the app itself. I have tried using the Link component (import Link from 'next/link';) and a few other ways but it all failed. I get this error:

Application error: a client-side exception has occurred (see the browser console for more information).

And when I look at the browser console, there is no useful information.

Precisely, this is the kind of information I find:

AbortError: Actor 'Conduits' destroyed before query 'RuntimeMessage' was resolved ConduitsParent.sys.mjs:362
    _raceResponses resource://gre/modules/ConduitsParent.sys.mjs:362

On the other hand if I replace the link above with another one for testing purpose like: https://www.startpage.com/; it perfectly works.

Is there something basic that I am missing, when using a dynamic route from inside the app itself ?

For further information; this is the page.tsx file for the dynamic route.

'use client'

import {FC} from 'react'
import { useRouter } from 'next/navigation'
import AudioRecorderPlayer from '../components/AudioRecorderPlayer'
import AudioList from '../components/AudioList'

interface pageProps {
  params: {channel: string}
}


const NxtJSRoute:FC<pageProps> = ({params}) => {
  const router = useRouter()

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      Inside our Next.JS app NxtJSRoute: {params.channel }
      <AudioList chanlID={params.channel} />
      <AudioRecorderPlayer chanlID={params.channel} />
    </main>
  )
}

export default NxtJSRoute