Next.js中amp-live-list缺少update插槽错误求助

在Next.js的AMP页面使用amp-live-list组件时，出现了amp-live-list must have an 'update' slot错误，核心问题是组件的slot标记不符合AMP规范。

错误原因 #

AMP官方规范要求amp-live-list必须包含两个核心slot：

• 带有slot="update"的元素，用于触发更新操作
• 带有slot="items"的容器，用于展示动态内容

你的代码里仅给button加了update属性、给div加了items属性，不符合AMP的slot语法要求，导致验证报错。

解决方法 #

修改amp-live-list内部元素，将属性替换为正确的slot属性：

1. 把button的update属性改为slot="update"
2. 把包裹内容的div的items属性改为slot="items"

修改后的完整代码 #

export const config = {amp: true};
const posts = [
  {
    body: "Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.",
    id: "1",
    time: "1498910001"
  },
  {
    body: "Sed leo sapien, molestie sit amet lorem eu, suscipit imperdiet tortor. Mauris maximus magna quam, non sodales metus auctor nec. Aenean tristique massa enim, non dictum mauris eleifend tristique. Proin fermentum nulla a nulla bibendum ultricies. Nulla pulvinar, risus vel tristique aliquet, elit quam tincidunt nisi, non blandit leo nulla eu ipsum. Sed porta, felis vitae elementum pellentesque, mauris felis rhoncus quam, ac suscipit eros justo ac justo. Proin et elit vitae sem interdum posuere et vitae nibh. Ut sed orci aliquam, pulvinar felis ac, pretium massa. Nullam porta ipsum non euismod mollis. Quisque scelerisque nisi quis pharetra blandit.",
    id: "2",
    time: "1498910002"
  },
  {
    body: "Vestibulum eu varius dolor. Praesent sagittis magna sem, non bibendum quam aliquam et. Sed et tristique mi. Quisque porta lorem et nulla lacinia gravida. Nullam semper lobortis sem, interdum tempus tellus. Proin accumsan imperdiet leo at vulputate. Nulla euismod placerat finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    id: "3",
    time: "1498910003"
  },
  {
    body: "Aenean ante erat, egestas a justo eu, sollicitudin convallis nulla. Fusce ex est, ornare in odio eu, venenatis dapibus purus. Etiam sit amet orci quam. Proin lobortis lobortis tellus, non elementum nunc consequat ac. Suspendisse eu purus sit amet dolor elementum mattis ut in odio.",
    id: "4",
    time: "1498910004"
  }
]

function Amp({items}) {
  return (
    <amp-live-list layout="container"
                   data-poll-interval="1000"
                   data-max-items-per-page="15"
                   id="amp-live-list-insert-post">
      <button slot="update"
              on="tap:amp-live-list-insert-post.update"
              className="ampstart-btn ml1 caps">
        You have updates
      </button>
      <div slot="items">
        {
          items.map((post, index) => (<p key={index} id={post.id} data-sort-time={post.time}>{post.body}</p>))
        }
      </div>
    </amp-live-list>
  )
}

export default Amp;


export async function getServerSideProps({req, res, locale, params}) {
  if (req.method === 'POST') {
    console.log(req.body);
    posts.push({
      body: "sd",
      id: posts.length + 1,
      time: '' + (Date.now())
    })
  }
  return {
    props: {
      items: posts,
    }
  };

}

额外说明 #

修改后AMP验证器将识别正确的slot结构，错误即可消除。同时需确保data-sort-time属性值为有效时间戳，以便live-list正确排序内容；服务器端getServerSideProps逻辑保持当前即可，确保更新时能返回最新的posts列表。

内容的提问来源于stack exchange，提问作者NARESH KUMAR TELI