Javascript – NextJS dynamic routes not working on my localhost

src/app/user/.js

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