Extra NextJS routes, not working, with sample provided

I have a NextJS app on Firebase with routing problems.
I already made a post to explain the issue here: https://stackoverflow.com/questions/76241124/extra-nextjs-routes-not-working-on-the-server-side

In this one I give a sample app building procedure to reproduce the issue; so that some NextJS experts can let me know where I am doing something wrong or missing some important detail.

Below is a detailed description of how I build a sample app to reproduce my problem.
Anyone should be able to follow the same steps.

This is what I do in the terminal:

me@MyMac % npm --version
8.15.0
me@MyMac % firebase --version
12.0.0

me@MyMac % npx create-next-app@latest
✔ What is your project named? … sampleapp
✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use Tailwind CSS with this project? … Yes
✔ Would you like to use `src/` directory with this project? … No
✔ Use App Router (recommended)? … Yes
✔ Would you like to customize the default import alias? … No
Creating a new Next.js app in /Users/me/sampleapp.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next


added 352 packages, and audited 353 packages in 21s

136 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created sampleapp at /Users/me/sampleapp

me@MyMac % cd sampleapp
me@MyMac sampleapp % 

At this point I edit the file next.config.js to make it look as follows:

me@MyMac sampleapp % cat next.config.js 
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
experimental: {
    appDir: true,
},
}

module.exports = nextConfig
me@MyMac sampleapp % 

Next I run the command:

me@MyMac sampleapp % firebase init hosting

    ######## #### ########  ######## ########     ###     ######  ########
    ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
    ######    ##  ########  ######   ########  #########  ######  ######
    ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
    ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

/Users/me/sampleapp


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: sampleproj-n2m3p4 (VicHugo)
i  Using project sampleproj-n2m3p4 (VicHugo)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? out
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔  Wrote out/404.html
✔  Wrote out/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!
me@MyMac sampleapp % 

At this point I edit the firebase.json file to make it look as follows:

me@MyMac sampleapp % cat firebase.json 
{
"hosting": {
    "public": "out",
    "site": "sampleapp",
    "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
    ]
}
}
me@MyMac sampleapp % 

Here I insert a directory called Special in the app directory; and inside it I put a file called page.tsx.

This is how it looks:

me@MyMac sampleapp % cat app/Special/page.tsx 
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}
me@MyMac sampleapp % 

Next I run the command:

me@MyMac sampleapp % npm run dev                            

At this point using the browser I can see:

http://localhost:3000/

    displaying the Next.JS default sample page, as expected.

http://localhost:3000/Special 

    Hello, Next.js!

shows up in the browser also as expected.

Then I stop the local server in the terminal and run the commands:

    me@MyMac sampleapp % npm run build
    me@MyMac sampleapp % firebase deploy --only hosting

Again using the browser I can see:

https://sampleapp.web.app

    Next.JS default sample page. (as expected)

https://sampleapp.web.app/Special

    404 | This page could not be found. (not as I expected)

I was expecting the same result as for: http://localhost:3000/Special

What happened ?

To remove the .html extension in the urls, add the cleanUrls attribute in your firebase.json file. Check the code below.

"hosting": {
  // ...

  // Drops `.html` from the URLs
  "cleanUrls": true
}