NextJS dynamic routes not working on my localhost

src/app/user/[username].js

[username].js file:

import { useRouter } from 'next/router'

export default function User() {
  const router = useRouter()
  return (
    <p>
      {router.query.username}
    </p>
  );
}

When i go to "localhost:3000/user/john" user/username url returning 404 not found.

I followed the examples in the current documentation exactly, but I still get the 404 output.
https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

>Solution :

The documentation for the App router states that your page should be at app/user/[username]/page.js instead of app/user/[username].js