Next.js应用：如何每3秒循环展示API获取的条目？

在Next.js中，涉及交互状态（如useState）或副作用（如useEffect）的组件必须标记为客户端组件，这是框架的核心规则。你遇到的问题本质是未正确区分服务器/客户端组件职责，以下是可落地的解决方案：

1. 封装客户端交互组件 #

创建专门处理切换逻辑的客户端组件，通过'use client'指令明确标记：

'use client';

import { useState, useEffect } from 'react';

export default function AutoSwitchItem({ items }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  // 每3秒切换索引，循环遍历条目
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex(prev => (prev + 1) % items.length);
    }, 3000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(interval);
  }, [items.length]);

  // 处理空列表的边界情况
  if (!items.length) return <div>No items to display</div>;

  // 渲染当前条目（替换成你的实际字段）
  const currentItem = items[currentIndex];
  return (
    <div className="item-container">
      <h3>{currentItem.title.text}</h3>
      <p>{currentItem.description.text}</p>
    </div>
  );
}

2. 在服务器组件中引入客户端组件 #

你的SSR数据获取逻辑保留在服务器组件中，直接将slice.items作为props传递给客户端组件即可：

（Pages Router 示例） #

// pages/your-page.js（服务器组件，无需'use client'）
import { PrismicClient } from '../lib/prismic';
import AutoSwitchItem from '../components/AutoSwitchItem';

export async function getServerSideProps() {
  // 从Prismic获取数据（替换成你的实际查询逻辑）
  const client = PrismicClient();
  const document = await client.getByUID('your_custom_type', 'your_document_uid');
  const targetSlice = document.data.slices.find(slice => slice.slice_type === 'your_slice_type');
  
  return {
    props: {
      sliceItems: targetSlice?.items || []
    }
  };
}

export default function YourPage({ sliceItems }) {
  return (
    <div className="page-container">
      <h1>自动切换条目展示</h1>
      <AutoSwitchItem items={sliceItems} />
    </div>
  );
}

（App Router 示例） #

// app/your-page/page.js（默认服务器组件）
import { PrismicClient } from '@/lib/prismic';
import AutoSwitchItem from '@/components/AutoSwitchItem';

async function fetchPrismicData() {
  const client = PrismicClient();
  const document = await client.getByUID('your_custom_type', 'your_document_uid');
  return document.data.slices.find(slice => slice.slice_type === 'your_slice_type')?.items || [];
}

export default async function YourPage() {
  const sliceItems = await fetchPrismicData();
  
  return (
    <main className="page-container">
      <h1>自动切换条目展示</h1>
      <AutoSwitchItem items={sliceItems} />
    </main>
  );
}

3. 为什么之前的lazy()方案报错？ #

lazy()仅用于代码拆分，无法替代'use client'指令的作用——只要组件使用了客户端专属API（如useState/useEffect），必须显式标记为客户端组件，否则框架会判定为服务器组件并抛出错误。

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