是否可以通过服务器有条件地控制isAmp？

问题描述

更新： 由于问题还不够清楚，我将重述我的问题。 我要在此处完成的是将isAmp从getinitialProps传递到该组件，以控制它是放大器还是普通放大器。

我为什么要这样做？ 因为如果页面正在加载已删除的项目，我想进行一些客户端操作；由于amp都是在服务器上完成的，所以我不能使用react挂钩，也不能在10秒后重定向页面。 希望这能更好地解释。

我有一个amp页面，当项目状态（href =“ page / itemId”）被删除时，我想将其转换为常规页面，这样我可以在10秒后使用客户端重定向用户。

要进行页面放大，我们只需将此导出添加到文件顶部

export const config = { amp: true };

我感兴趣的模式是“混合”模式。 有没有办法像下面的下一个钩子一样，将isAmp值传递到服务器，然后传递给客户端

const isAmp = useAmp();

我希望将值直接传递到上面的代码的第一行：

export const config = { amp: isAmp };

我正在完成此过程，以使客户端代码正常工作，例如将页面重定向到另一个URL。仅适用于非放大网页。

解决方法

如documentation所述，请使用hybrid模式。

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