Fix LCP in Strapi

export default ({ env }) => ({
  upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
        s3Options: {
          credentials: {
            accessKeyId: env('AWS_ACCESS_KEY_ID'),
            secretAccessKey: env('AWS_ACCESS_SECRET'),
          },
          region: env('AWS_REGION'),
          params: { Bucket: env('AWS_BUCKET') },
        },
        // Front the bucket with CloudFront (or Cloudflare R2 + CDN)
        baseUrl: env('CDN_BASE_URL'), // https://cdn.example.com
      },
      // Generate AVIF/WebP renditions on upload
      sizeOptimization: true,
      responsiveDimensions: true,
      breakpoints: {
        large: 1200,
        medium: 750,
        small: 500,
        thumbnail: 245,
      },
      // Bad: PNG/JPEG only (Strapi default)
      // Good: emit AVIF + WebP renditions, fall back to original
      formats: ['avif', 'webp', 'original'],
      quality: 78,
    },
  },
});

// Bad: returns the whole graph, 30 to 90 KB on a real blog post
// const url = `${STRAPI_URL}/api/articles?filters[slug][$eq]=${slug}&populate=*`;

// Good: tight projection, under 4 KB
export function articleBySlugUrl(slug: string) {
  const qs = new URLSearchParams({
    'filters[slug][$eq]': slug,
    'fields[0]': 'title',
    'fields[1]': 'slug',
    'fields[2]': 'publishedAt',
    'fields[3]': 'excerpt',
    'populate[hero][fields][0]': 'url',
    'populate[hero][fields][1]': 'width',
    'populate[hero][fields][2]': 'height',
    'populate[hero][fields][3]': 'alternativeText',
    'populate[hero][fields][4]': 'formats',
    'populate[author][fields][0]': 'name',
    'populate[author][fields][1]': 'slug',
    'pagination[limit]': '1',
  });
  return `${STRAPI_URL}/api/articles?${qs.toString()}`;
}

import { strapiFetch } from '@/lib/strapi-client';
import { articleBySlugUrl } from '@/lib/strapi';

export default async function ArticlePage({ params }: { params: { slug: string } }) {
  const data = await strapiFetch(articleBySlugUrl(params.slug), {
    next: { tags: [`article:${params.slug}`] },
  });
  const article = data.data[0];
  const hero = article.hero;

  // Strapi returns formats: { large: {url,width,...}, medium: {...}, small: {...} }
  const heroSrc = hero.formats.large.url;
  const heroSet = ['small', 'medium', 'large']
    .map((k) => `${hero.formats[k].url} ${hero.formats[k].width}w`)
    .join(', ');

  return (
    <>
      {/* Preload the hero before any layout work happens */}
      <link
        rel="preload"
        as="image"
        href={heroSrc}
        imageSrcSet={heroSet}
        imageSizes="(max-width: 768px) 100vw, 1200px"
        fetchPriority="high"
      />
      <article>
        <h1>{article.title}</h1>
        {/* hero rendered with framework component below */}
      </article>
    </>
  );
}

// Strapi lifecycle hook that calls the front-end revalidate endpoint
export default {
  async afterUpdate(event) {
    await notifyFrontend(event.result);
  },
  async afterCreate(event) {
    await notifyFrontend(event.result);
  },
};

async function notifyFrontend(entity: any) {
  if (!entity?.slug) return;
  await fetch(`${process.env.FRONTEND_URL}/api/revalidate`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-strapi-webhook-secret': process.env.STRAPI_WEBHOOK_SECRET!,
    },
    body: JSON.stringify({
      contentType: 'article',
      id: entity.id,
      slug: entity.slug,
    }),
  });
}

// app/api/revalidate/route.ts on the Next.js front-end
//
//   import { revalidateTag } from 'next/cache';
//   import { NextRequest } from 'next/server';
//
//   export async function POST(req: NextRequest) {
//     if (req.headers.get('x-strapi-webhook-secret') !== process.env.STRAPI_WEBHOOK_SECRET) {
//       return new Response('Unauthorized', { status: 401 });
//     }
//     const { contentType, slug } = await req.json();
//     if (contentType === 'article' && slug) {
//       revalidateTag(`article:${slug}`);
//     }
//     return Response.json({ revalidated: true });
//   }

import Image, { ImageLoader } from 'next/image';

type StrapiFormats = {
  small: { url: string; width: number };
  medium: { url: string; width: number };
  large: { url: string; width: number };
};

const strapiLoader = (formats: StrapiFormats): ImageLoader =>
  ({ width }) => {
    if (width <= formats.small.width) return formats.small.url;
    if (width <= formats.medium.width) return formats.medium.url;
    return formats.large.url;
  };

type Props = {
  hero: {
    url: string;
    width: number;
    height: number;
    alternativeText?: string;
    formats: StrapiFormats;
  };
};

export function HeroImage({ hero }: Props) {
  return (
    <Image
      loader={strapiLoader(hero.formats)}
      src={hero.formats.large.url}
      alt={hero.alternativeText ?? ''}
      width={hero.width}
      height={hero.height}
      sizes="(max-width: 768px) 100vw, 1200px"
      priority           // sets fetchpriority=high, skips lazy
      placeholder="empty" // never LQIP the LCP element
      quality={78}
    />
  );
}