useAmp is a hook and server components don't support hooks

that's why you have to use client components

that said, the app router doesn't have AMP support

But it works in Page router without any directive

pages router files are all client components

pages router doesn't have server components

How to acheive AMP now
https://blog.amp.dev/2019/08/07/faster-amp-on-the-origin-amp-ssr/
AMP SSR is for everyone
If you publish AMP pages, you should publish server-side-rendered AMP pages. Similar to minifying your HTML or CSS, running AMP Optimizer or the Go transformers should be a normal part of your build / rendering chain. The improved rendering performance makes a big difference in FCP times, but more importantly, in the user experience.

you have to use the pages router because AMP is simply not supported and not planned in the app router https://web.archive.org/web/20230502055033/https://beta.nextjs.org/docs/app-directory-roadmap#not-planned-features

😥 Is there any reason?

Ig that’s because amp is kinda a forgotten tech at this point and the team think it’s not beneficial to keep supporting it (which incurs additional manpower, time and cost for perhaps too little gain)

And personally I agree with them, you can build amazing web apps without it and I haven’t seen the term amp going around as much as an amp user would want it to be

It’s just not widely used enough

Even using 'use client' directive in the child component is not working.
Landing page ==> parent page
Intro page ==> child component, and it has a directive 'use client'. However, here, useAMP gives a result of false.

Yeah because amp simply isn’t supported. You’re out of luck here, it really is either amp or app directory, not both