探索Next.js的中文文档站点：next-site-cn

// 引入Next.js的API routes相关的文件
import { GetStaticProps } from 'next';
import { useTranslation } from 'next-i18next';
 
// 定义一个组件，展示文档的目录
export default function DocCatalog({ catalog }) {
  const { t } = useTranslation('docs');
 
  return (
    <div>
      <h1>{t('catalog-title')}</h1>
      <ul>
        {catalog.map((item) => (
          <li key={item.id}>
            <a href={item.url}>{t(item.title)}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}
 
// 获取静态props的函数，用于预渲染文档目录数据
export const getStaticProps: GetStaticProps = async ({ locale }) => {
  // 假设有一个获取目录数据的API
  const catalog = await fetchCatalogData(locale);
 
  return {
    props: {
      catalog,
      // 其他需要预渲染的数据
    },
    // 设置重新渲染的时间间隔，例如1小时
    revalidate: 60 * 60,
  };
};
 
// 假设的fetchCatalogData函数，用于获取目录数据，返回Promise
async function fetchCatalogData(locale) {
  // 实现数据获取逻辑
}

这个代码示例展示了如何使用Next.js的API routes来创建一个文档目录页面，并预渲染该页面的数据。它使用了getStaticProps来获取目录数据，并通过useTranslation从i18n的namespace（在这里是'docs'）中按需获取本地化标题。这个示例还展示了如何设置页面的静态props和重新验证的时间间隔。