Next.js 12 AMP开发报错：amp-list组件版本未定义问题求助

问题描述 #

访问/amp/article路径时重复出现报错：
error The extension 'amp-list' is referenced at version 'undefined' which is an invalid version. Please use a valid version of this extension.

相关代码如下：

<amp-list
  height="277"
  layout="fixed-height"
  src="${relatedArticlesUrl}"
  items="." 
  single-item="."
>
 <div placeholder>Loading ...</div>
 <div fallback>Failed to load data.</div>
 <template type="amp-mustache">
 <div class="slction_section">
  <amp-carousel height="254" layout="fixed-height" type="carousel" role="region" aria-label="Basic usage   carousel" data-next-button-aria-label="Go to next slide" data-previous-button-aria-label="Go to previous slide">
    {{#items}}
    <a class="districtSelect" href={{url}} data-vars-event-label='{{title}},{{id}}' data-vars-event-category="Related_Story">
     <figure><amp-img src={{thumbnail}}?im=Resize,width=201,aspect=fit,type=normal height="134" width="201" /></figure>
      <p>{{title}}</p>
    </a>
    {{/items}}
   </amp-carousel>
  </div>
 </template>
</amp-list>

解决方案 #

• 引入正确版本的AMP组件脚本
  AMP扩展组件需要在页面头部明确引入对应版本的脚本，在你的AMP页面<head>标签中添加以下内容：

  <!-- 引入amp-list组件脚本 -->
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <!-- 引入amp-carousel组件脚本 -->
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <!-- 引入amp-mustache模板脚本 -->
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  

  未指定版本的脚本引用会导致AMP无法识别组件版本，从而抛出错误。

• 修正amp-list的属性写法
  代码中single-item="."不符合AMP规范，single-item是布尔属性，只需声明属性名即可，无需赋值。修正后的amp-list标签：

  <amp-list
    height="277"
    layout="fixed-height"
    src="${relatedArticlesUrl}"
    items="." 
    single-item
  >
  

• 验证Next.js AMP页面配置
  确保你的页面已开启AMP模式，在页面文件顶部添加配置：

  export const config = {
    amp: true, // 若需混合模式可设置为 'hybrid'
  };
  

  Next.js会自动处理部分AMP基础脚本，但自定义扩展组件仍需手动引入正确版本。

内容的提问来源于stack exchange，提问作者Siddhant Sinha