i am using nextjs app router. i can’t get the dynamic route value inside page.tsx

file structure
src/
app/
(app)/
signin/page.tsx
signup/page.tsx
verify/
[username]/
page.tsx

const [isSubmitting, setIsSubmitting] = useState(false);
const router = useRouter();
const params = useParams<{ username: string }>();

const { username } = params;
console.log(username);
const { toast } = useToast();

const form = useForm<z.infer<typeof VerifySchema>>({
    resolver: zodResolver(VerifySchema),
});

const onSubmit = async (data: z.infer<typeof VerifySchema>) => {
    try {
        const response = await axios.post('/api/verify-code', {
            username,
            verifyCode: data.code,
        });

        if (response.data.success) {
            toast({
                title: 'Success',
                description: response.data.message,
            });
            router.replace('/signin');
        }
    } catch (error) {
        const axiosError = error as AxiosError<ApiResponse>;
        toast({
            title: 'Error verifying code',
            description:
                axiosError.response?.data?.message ??
                'Error while verifying code',
            variant: 'destructive',
            });
    }
};

which i navigate to this route 404 not found is coming when i console also not working
enter image description here