I am building a website using Next.js where users can make their accounts and accepts payments by their followers through the website (much like patreon website). For each user, I have made a /[username] dynamic route to accept payments. when a username which is not present in database tries to access /[username] page then not-found.js page is not opening instead Error: NEXT_NOT_FOUND is coming. This is my /[username] page (fetchuser is a server side function which fetches user from database) –

"use client"

import PaymentPage from '@/components/PaymentPage'
import React from 'react'
import { useEffect } from 'react'
import { notFound } from 'next/navigation'
import connectDB from '@/db/connectDb'
import User from '@/models/User'
import { fetchuser } from '@/actions/useractions'

const page = ({ params }) => {

    //if username is not present in database, show a 404 error
    useEffect(() => {
        const checkUser = async () => {
            console.log(`in ${params.username}`)
            let u = await fetchuser(params.username)
            console.log(`value of u ${u}`)
            if (u === undefined) {
                try {
                    notFound();
                } catch (error) {
                    console.log("error", error)
                }
            }

        }
        checkUser()
    }, [])

    return (
        <>
            <PaymentPage username={params.username} />
        </>
    )

}

export default page

After reading docs i tried to put notFound() function in server side file but it’s still showing the same error (Error: NEXT_NOT_FOUND).
I also added not-found.js file in /[username] folder but still same error is coming.
On going through earlier questions on stack overflow, i came across this Next 13.3: How to use NotFound() for a 404 Page but here also no solution was present.

Long story short, i tried everything still it’s showing same error again & again. I am comparatively new to next.js framework so pardon me if there are some silly errors.