求助：在NextJs 13新App目录中配置Contentful无头CMS

关于是否需要 createClient #

两种方式都可行，但推荐使用 Contentful 官方提供的 createClient：

• 官方客户端封装了API请求细节、错误处理、数据格式化，比手动写Fetch更简洁可靠
• 支持更复杂的查询（比如筛选、排序、包含关联内容），后续扩展更方便
• 自带TypeScript类型支持，开发体验更好

方案一：使用 Contentful 官方客户端（推荐） #

1. 安装依赖 #

npm install contentful
# 或
yarn add contentful

2. 抽离客户端配置（复用性更好） #

新建 lib/contentful.ts 文件：

import { createClient } from 'contentful';

export const contentfulClient = createClient({
  space: process.env.CONTENTFUL_SPACE_ID as string,
  accessToken: process.env.CONTENTFUL_ACCESS_KEY as string,
});

3. 在 page.tsx 中获取数据 #

App Router中服务器组件可以直接是异步函数，无需额外数据获取方法：

import { contentfulClient } from '@/lib/contentful';

export default async function Recipes() {
  // 获取指定内容类型的条目
  const response = await contentfulClient.getEntries({
    content_type: 'recipe',
    // 可添加其他查询参数，比如排序、筛选
    // order: '-sys.createdAt'
  });

  // 提取食谱数据
  const recipes = response.items;

  return (
    <div className='recipe-list'>
      <h1>食谱列表</h1>
      <ul>
        {recipes.map((recipe) => (
          <li key={recipe.sys.id}>{recipe.fields.title}</li>
        ))}
      </ul>
    </div>
  );
}

方案二：直接使用 Fetch API（不依赖 createClient） #

如果坚持用Fetch，需要修正现有代码的两个问题：

1. URL中的&是HTML转义字符，模板字符串中需改为&
2. 添加响应错误处理，避免无效数据

修正后的 page.tsx：

async function getData() {
  const res = await fetch(
    `https://cdn.contentful.com/spaces/${process.env.CONTENTFUL_SPACE_ID}/entries?access_token=${process.env.CONTENTFUL_ACCESS_KEY}&content_type=recipe`
  );

  // 处理请求错误
  if (!res.ok) {
    throw new Error('获取食谱数据失败');
  }

  return res.json();
}

export default async function Recipes() {
  const data = await getData();
  const recipes = data.items;

  return (
    <div className='recipe-list'>
      <h1>食谱列表</h1>
      <ul>
        {recipes.map((recipe) => (
          <li key={recipe.sys.id}>{recipe.fields.title}</li>
        ))}
      </ul>
    </div>
  );
}

注意事项 #

• 确保 .env 文件中已正确配置环境变量：

  CONTENTFUL_SPACE_ID=你的Space ID
  CONTENTFUL_ACCESS_KEY=你的访问令牌
  

• App Router中 page.tsx 默认是服务器组件，环境变量不会暴露到客户端，无需添加NEXT_PUBLIC_前缀
• 如果需要在客户端组件中获取数据，可使用 SWR 或 React Query 进行客户端数据获取

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