免费版ACF通过GraphQL映射到Next.js前端组件的实现方法

结论 #

免费版ACF完全可以实现该需求，无需升级到付费版本，仅需要调整WordPress侧REST API的字段暴露规则即可。

WordPress侧配置 #

不需要安装额外插件，只需将以下代码添加到当前WordPress主题的functions.php文件中：

1. 暴露ACF字段到REST API返回结果 #

// 将ACF字段注入REST API的文章/页面/自定义文章类型返回值
add_action('rest_api_init', function () {
    // 按需替换为你需要暴露的文章类型，支持自定义文章类型
    $enabled_post_types = ['page', 'post', 'your_custom_post_type'];
    foreach ($enabled_post_types as $post_type) {
        register_rest_field($post_type, 'acf', [
            'get_callback' => function ($post) {
                return get_fields($post['id']);
            },
            'update_callback' => null,
            'schema' => null,
        ]);
    }
});

添加完成后，请求/wp-json/wp/v2/[文章类型]端点时，返回结果会新增acf字段，包含对应内容的所有ACF字段值，无需再从默认content字段中解析数据。

2. 支持ACF字段动态查询（可选，用于路由筛选场景） #

如果需要根据ACF字段的值筛选内容（比如匹配动态路由参数），添加以下代码：

// 允许REST API通过ACF字段筛选内容
add_filter('rest_post_query', function ($args, $request) {
    // 替换为你允许用于查询的ACF字段名
    $allowed_query_fields = ['field_slug_1', 'field_slug_2'];
    foreach ($allowed_query_fields as $field) {
        if ($request->get_param($field)) {
            $args['meta_query'][] = [
                'key' => $field,
                'value' => $request->get_param($field),
                'compare' => '=' // 可根据需求调整为LIKE、>、<等匹配规则
            ];
        }
    }
    return $args;
}, 10, 2);

注意：如果需要给自定义文章类型开查询权限，把钩子名中的rest_post_query替换为rest_你的自定义文章类型别名_query即可。

Next.js侧适配逻辑 #

以Next.js 13+ App Router动态路由为例，Pages Router逻辑基本一致：

1. 生成静态路由参数时，拉取所有内容的slug和对应ACF字段即可完成路由注册
2. 页面组件渲染时直接读取返回结果的acf字段，通过组件映射表完成动态渲染：

// 组件映射表，key对应ACF字段的布局别名，value对应你的Next.js组件
const ComponentMap = {
  hero_banner: HeroBanner,
  text_section: TextSection,
  faq_list: FaqList
}

export default async function DynamicPage({ params }) {
  // 请求对应slug的页面数据
  const res = await fetch(`https://你的WordPress域名/wp-json/wp/v2/pages?slug=${params.slug}`, { next: { revalidate: 3600 } })
  const [pageData] = await res.json()
  const acfData = pageData.acf

  return (
    <main>
      {/* 遍历ACF的灵活内容字段渲染对应组件，非灵活内容可直接读取对应字段渲染 */}
      {acfData.page_blocks?.map((block, idx) => {
        const Component = ComponentMap[block.acf_fc_layout]
        return Component ? <Component key={idx} {...block} /> : null
      })}
    </main>
  )
}

额外说明 #

如果你的技术栈使用WPGraphQL替代原生REST API，免费版ACF也可以通过免费的WPGraphQL for ACF插件完成字段暴露，逻辑与上述方案一致，无需付费版ACF支持。

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