Is it possible to conditionally control isAmp through the server?

Question

UPDATE: I'll rephrase my question since it's not clear enough. What I want to accomplish here is pass isAmp from getInitialProps to the component to control whether it'll be amp or a regular one.

Why I want to do that? Because I want to make some client operations if the page is loading a deleted item; since amp is all done on the server, I can't use react hooks nor redirect the page after 10 seconds. Hope this explains better.

I have an an amp page that I want to turn into a regular page when an item status(href="page/itemId") is deleted so I can use the client side to redirect the user after 10seconds.

To make a page amp, we just add this export at the top of the file

export const config = { amp: true };

The mode I'm interested in is the 'hybrid' mode. Is there a way to pass the isAmp value through the server and then to the client like this next hook does

const isAmp = useAmp();

I want the value passed right to the first line of code above:

export const config = { amp: isAmp };

I'm going through this process in order to make client side code work, like redirecting the page to another url. Which only works on non-amp pages.

Answer 1

From the doc you are not allowed to do the dynamic / conditional page configuration.

this is not allowed:

const test= somecondition ? true : 'hybrid'

export const config = {
    amp: test
}

see here: https://nextjs.org/docs/messages/invalid-page-config

Answer 2

As the documentation says, use the hybrid mode.

import {useAmp} from 'next/amp'

export const config = {amp: 'hybrid'} // Hybrid mode

function About(props) {
  const isAmp = useAmp()

  return (
    <div>
      <h3>My AMP About Page!</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="a cool image"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
      )}
    </div>
  )
}

export default About