create-nextblock 0.13.11 → 0.13.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.13.11",
+  "version": "0.13.12",
   "description": "",
   "main": "index.js",
   "bin": {

package/templates/nextblock-template/components/BlockRenderer.tsx

@@ -188,6 +188,10 @@ async function renderLoadedBlock({
       parentBlockIndex={blockIndex}
       botProtectionPublic={botProtectionPublic}
       scriptNonce={scriptNonce}
+      // The first top-level block is above the fold, so its media is the LCP
+      // candidate. Renderers that own an image (video_embed's poster frame)
+      // use this to preload instead of lazy-loading it.
+      priority={blockIndex === 0}
     />
   );
 }

package/templates/nextblock-template/components/blocks/renderers/SectionBlockRenderer.tsx

@@ -379,6 +379,9 @@ async function renderNestedBlock({
       parentBlockIndex={parentBlockIndex}
       botProtectionPublic={botProtectionPublic}
       scriptNonce={scriptNonce}
+      // Hero sections also carry LCP-eligible media in dynamically loaded
+      // renderers (e.g. video_embed's poster frame), not just nested images.
+      priority={priority}
     />
   );
 }

package/templates/nextblock-template/components/blocks/renderers/VideoEmbedBlockRenderer.tsx

@@ -8,12 +8,15 @@ interface VideoEmbedBlockRendererProps {
   content: VideoEmbedBlockContent;
   languageId: number;
   visualEditAttributes?: VisualEditAttributes;
+  /** Set for hero / first-position blocks so the poster is preloaded (LCP). */
+  priority?: boolean;
 }
 
 const VideoEmbedBlockRenderer: React.FC<VideoEmbedBlockRendererProps> = ({
   content,
   languageId,
   visualEditAttributes,
+  priority = false,
 }) => {
   void languageId;
   if (!content.url) {
@@ -54,6 +57,7 @@ const VideoEmbedBlockRenderer: React.FC<VideoEmbedBlockRendererProps> = ({
             title={content.title}
             query={embedParams.toString()}
             className="absolute inset-0 h-full w-full rounded-lg"
+            priority={priority}
           />
         ) : (
           <iframe

package/templates/nextblock-template/components/media/YouTubeFacade.tsx

@@ -1,7 +1,13 @@
 'use client';
 
 import React, { useState } from 'react';
-import { buildNoCookieEmbedUrl, youTubePosterUrl } from '../../lib/media/youtube';
+import Image from 'next/image';
+import {
+  buildNoCookieEmbedUrl,
+  youTubePosterUrl,
+  YOUTUBE_POSTER_DIMENSIONS,
+  type YouTubePosterQuality,
+} from '../../lib/media/youtube';
 
 interface YouTubeFacadeProps {
   videoId: string;
@@ -10,9 +16,19 @@ interface YouTubeFacadeProps {
   query?: string;
   /** Classes for the clickable surface / injected iframe. Defaults to filling its parent. */
   className?: string;
+  /**
+   * Above-the-fold embeds. The poster is very often the page's LCP element, so
+   * this preloads it, marks it fetchpriority=high and drops lazy-loading.
+   */
+  priority?: boolean;
+  /** Responsive-srcset layout hint; override when the embed is not ~half-width. */
+  sizes?: string;
 }
 
 const FILL = 'absolute inset-0 h-full w-full';
+// The video block is content-width, so it is full-bleed on phones and roughly a
+// column wide on desktop. Callers that know better pass their own `sizes`.
+const DEFAULT_SIZES = '(max-width: 768px) 100vw, 50vw';
 
 /**
  * Click-to-play YouTube facade: renders a poster + play button and loads no
@@ -21,11 +37,20 @@ const FILL = 'absolute inset-0 h-full w-full';
  * cookies from the player JS, so the only reliable fix is not booting the
  * player during the audit. See lib/media/youtube.ts.
  */
-const YouTubeFacade: React.FC<YouTubeFacadeProps> = ({ videoId, title, query, className }) => {
+const YouTubeFacade: React.FC<YouTubeFacadeProps> = ({
+  videoId,
+  title,
+  query,
+  className,
+  priority = false,
+  sizes,
+}) => {
   const [activated, setActivated] = useState(false);
-  const [poster, setPoster] = useState(() => youTubePosterUrl(videoId, 'maxres'));
+  const [posterQuality, setPosterQuality] = useState<YouTubePosterQuality>('maxres');
   const label = title || 'YouTube video';
   const surface = className || FILL;
+  const poster = youTubePosterUrl(videoId, posterQuality);
+  const posterSize = YOUTUBE_POSTER_DIMENSIONS[posterQuality];
 
   if (activated) {
     return (
@@ -47,14 +72,25 @@ const YouTubeFacade: React.FC<YouTubeFacadeProps> = ({ videoId, title, query, cl
       aria-label={`Play video: ${label}`}
       className={`${surface} group flex items-center justify-center overflow-hidden border-0 bg-black p-0`}
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
+      {/* Routed through next/image on purpose: i.ytimg.com serves the poster as a
+          full-size JPEG with a 2h cache TTL, which made a ~205 KiB download the LCP
+          for a thumbnail-sized slot. The optimizer re-encodes to AVIF/WebP at the
+          displayed width and serves it same-origin under the app's long cache TTL. */}
+      <Image
         src={poster}
         alt=""
         aria-hidden="true"
-        loading="lazy"
+        width={posterSize.width}
+        height={posterSize.height}
+        sizes={sizes || DEFAULT_SIZES}
+        quality={60}
+        priority={priority}
+        fetchPriority={priority ? 'high' : undefined}
+        loading={priority ? undefined : 'lazy'}
         decoding="async"
-        onError={() => setPoster(youTubePosterUrl(videoId, 'hq'))}
+        // maxresdefault.jpg is not uploaded for every video; fall back to the
+        // hqdefault variant, which always exists.
+        onError={() => setPosterQuality((current) => (current === 'maxres' ? 'hq' : current))}
         className="absolute inset-0 h-full w-full object-cover opacity-90 transition group-hover:opacity-100"
       />
       <span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-black/70 text-white shadow-lg transition group-hover:scale-110 group-hover:bg-red-600">

package/templates/nextblock-template/lib/media/youtube.ts

@@ -76,6 +76,24 @@ export function rewriteYouTubeHostsInHtml(html: string): string {
   );
 }
 
-export function youTubePosterUrl(videoId: string, quality: 'maxres' | 'hq' = 'maxres'): string {
+export type YouTubePosterQuality = 'maxres' | 'hq';
+
+/**
+ * Intrinsic size of each poster variant. maxresdefault is 16:9 but is not
+ * uploaded for every video; hqdefault always exists and is 4:3 (the frame is
+ * letterboxed inside it), which is why the facade object-covers the poster.
+ */
+export const YOUTUBE_POSTER_DIMENSIONS: Record<
+  YouTubePosterQuality,
+  { width: number; height: number }
+> = {
+  maxres: { width: 1280, height: 720 },
+  hq: { width: 480, height: 360 },
+};
+
+export function youTubePosterUrl(
+  videoId: string,
+  quality: YouTubePosterQuality = 'maxres'
+): string {
   return `https://i.ytimg.com/vi/${videoId}/${quality === 'maxres' ? 'maxresdefault' : 'hqdefault'}.jpg`;
 }

package/templates/nextblock-template/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/nextblock-template/next.config.js

@@ -203,6 +203,12 @@ function getRemotePatterns() {
     { protocol: 'https', hostname: '**.r2.dev', pathname: '/**' },
     { protocol: 'https', hostname: '**.r2.cloudflarestorage.com', pathname: '/**' },
     { protocol: 'https', hostname: '**.supabase.co', pathname: '/**' },
+    // YouTube poster frames for the click-to-play facade
+    // (components/media/YouTubeFacade.tsx). Serving them through the optimizer
+    // turns a ~205 KiB third-party JPEG with a 2h TTL into a same-origin
+    // AVIF/WebP at the displayed size — the facade poster is frequently the LCP.
+    { protocol: 'https', hostname: 'i.ytimg.com', pathname: '/vi/**' },
+    { protocol: 'https', hostname: 'img.youtube.com', pathname: '/vi/**' },
   );
 
   // Add R2 Bucket URL if authenticated

package/templates/nextblock-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextblock-cms/template",
-  "version": "0.13.11",
+  "version": "0.13.12",
   "private": true,
   "scripts": {
     "dev": "next dev",