如何从 Next.js 覆盖 AMP URL 模式答案

【问题标题】：How override the AMP URL mode from Next.js如何从 Next.js 覆盖 AMP URL 模式
【发布时间】：2020-10-25 07:32:59
【问题描述】：

我可以将默认 URL AMP 替换为另一种模式吗？

示例： ?amp=1 > /amp/

Next.Js 文档： https://nextjs.org/docs/api-reference/next/amp

页面呈现为传统 HTML（默认）和 AMP HTML（通过将 ?amp=1 添加到 URL）

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

我不知道下一个 js 中的任何现有功能，但您可以做的是通过在/amp 文件夹中添加您的页面来使用文件系统路由自己制作：

pages/index.js
pages/amp/index.js

amp 页面只是重新导出其等效页面的内容：

// /amp/index.js
import Page, { getStaticProps } from "../index";

export const config = { amp: true };
export default Page;
export { getStaticProps };

非amp的页面是标准页面，但不要忘记链接到amp页面：

export config = {}

export default Page(){
  const isAmp = useAmp();
  return (
  <>
      {isAmp ? (
        <Head>
          <link rel="canonical" href="/" />
        </Head>
      ) : (
        <Head>
          <link rel="amphtml" href="/amp" />
        </Head>
      )}
      <div>Home Page</div>

  </>)
}

【讨论】：