Actually <Link> tag working fine. But <Image> not working.
For example
Not working code
<Image src="/images/logo.png" width="50px" height="50px" alt="logo" />

Working code
<Image src="/my-app/images/logo.png" width="50px" height="50px" alt="logo" />

I have already added basePath in the next.config file, but the <Image> tag does not automatically append the path before the relative URL. Therefore, I am forced to manually add basePath before the relative URL.

If you import the image statically, does it work?

I think <Image /> here intentionally does not add the base path because you could need to use an image outside the nextjs app but in the same domain

Understood.

But what about metadata manifest file?

it's also not working

Same reason. Instead of this, add app/manifest.json instead

Basically you probably should refrain from using the public folder wherever possible due to this basePath thingy

Some things might automatically get the base path, some don’t

So things that don’t depend on the path, such as statically imported images and file-based metadata, are immune to this problem

"file-based metadata" means?

its a string

Meaning instead of adding manifest.json to public and reference it in a metadata export, you add the manifest.json file in app/. https://nextjs.org/docs/app/api-reference/file-conventions/metadata

For manifest.json specifically, https://nextjs.org/docs/app/api-reference/file-conventions/metadata/manifest

@joulev thanks for your answer. I think it's working fine now.

Thank you for your help 👍