Headless Next.js Storefront with WordPress Content and Shopify Commerce, plus a Shopify App

import crypto from 'crypto';

export async function POST(req: Request) {
  const raw = await req.text(); // MUST be before JSON.parse
  const hmac = req.headers.get('x-shopify-hmac-sha256') ?? '';

  const digest = crypto
    .createHmac('sha256', process.env.SHOPIFY_WEBHOOK_SECRET!)
    .update(raw, 'utf8')
    .digest('base64');

  if (
    digest.length !== hmac.length ||
    !crypto.timingSafeEqual(Buffer.from(digest), Buffer.from(hmac))
  ) {
    return new Response('Unauthorized', { status: 401 });
  }

  const topic = req.headers.get('x-shopify-topic');
  const payload = JSON.parse(raw);

  // Respond fast; do the work in the background.
  if (topic === 'products/update') {
    await revalidateProduct(payload.handle);
    await revalidateCollectionsForProduct(payload.id);
  }

  return new Response('ok', { status: 200 });
}

Awaiting req.text() before any parsing is the whole trick, and timingSafeEqual is what makes this a real signature check.

const PRODUCT_QUERY = `
  query Product($handle: String!, $country: CountryCode, $language: LanguageCode)
  @inContext(country: $country, language: $language) {
    product(handle: $handle) {
      id
      title
      descriptionHtml
      featuredImage { url altText width height }
      priceRange { minVariantPrice { amount currencyCode } }
      variants(first: 50) {
        nodes { id title availableForSale price { amount currencyCode } selectedOptions { name value } }
      }
    }
  }
`;

@inContext is not optional for multi-currency, because without it every market sees base-currency prices.

add_action( 'rest_api_init', function () {
    register_rest_field( 'post', 'acf_fields', [
        'get_callback' => function ( $post_arr ) {
            return [
                'hero'    => get_field( 'hero', $post_arr['id'] ),
                'excerpt' => get_field( 'custom_excerpt', $post_arr['id'] ),
            ];
        },
        'schema' => [
            'description' => 'ACF fields for the headless front end.',
            'type'        => 'object',
        ],
    ] );
} );

Exposing only the fields the front end renders keeps the payload small and avoids leaking admin-only field groups.