fix: switch to node:20-slim for runner to fix persistent image optimization 400 errors

Dockerfile

@@ -56,15 +56,16 @@ ENV UV_THREADPOOL_SIZE=3
 RUN pnpm build
 
 # Stage 2: Runner
-FROM node:20-alpine AS runner
+FROM node:20-slim AS runner
 WORKDIR /app
 
-# Install curl for health checks
-RUN apk add --no-cache curl
+# Install curl for health checks and procps
+RUN apt-get update && apt-get install -y curl procps && rm -rf /var/lib/apt/lists/*
 
-# Create nextjs user and group (standardized in runtime image but ensuring local ownership)
-RUN addgroup --system --gid 1001 nodejs && \
-    adduser --system --uid 1001 nextjs && \
+# Create nextjs user and group
+RUN groupadd --system --gid 1001 nodejs && \
+    useradd --system --uid 1001 nextjs && \
+    mkdir -p .next/cache/images && \
     chown -R nextjs:nodejs /app
 
 USER nextjs
@@ -72,11 +73,15 @@ USER nextjs
 ENV HOSTNAME="0.0.0.0"
 ENV PORT=3000
 ENV NODE_ENV=production
+ENV NEXT_SHARP_PATH=/app/node_modules/sharp
 
-# Copy standalone output and static files
-COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+# Copy standalone output
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+# Copy public and static files - standalone expects them in specific locations
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
+
+# Ensure cache directory is writable for the nextjs user
+# (Already handled by chown -R above, but explicit is better)
 
 CMD ["node", "server.js"]

middleware.ts

@@ -26,6 +26,8 @@ export default async function middleware(request: NextRequest) {
     pathname.startsWith('/errors') ||
     pathname.startsWith('/health') ||
     pathname.startsWith('/uploads') ||
+    pathname.startsWith('/media') ||
+    pathname.startsWith('/_next/image') ||
     pathname.includes('/api/og') ||
     pathname.includes('opengraph-image') ||
     pathname.endsWith('sitemap.xml') ||
@@ -61,7 +63,7 @@ export default async function middleware(request: NextRequest) {
     if (['GET', 'HEAD'].includes(request.method)) {
       // Clone headers to ensure all Next.js internal headers (like router state) are preserved
       const clonedHeaders = new Headers(request.headers);
-      
+
       effectiveRequest = new NextRequest(urlObj, {
         headers: clonedHeaders,
         method: request.method,

next.config.mjs

@@ -403,7 +403,7 @@ const nextConfig = {
   },
   images: {
     formats: ['image/webp'],
-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
     remotePatterns: [
       {
         protocol: 'https',

package.json

@@ -113,7 +113,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.3.22-rc.12",
+  "version": "2.3.22-rc.16",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",

scripts/smoke.ts

@@ -44,7 +44,19 @@ async function run() {
           urls.map(async (url) => {
             try {
               const res = await fetch(url, { method: 'HEAD' });
-              if (res.status >= 400) broken.push(`${url} (Status: ${res.status})`);
+              if (res.status >= 400) {
+                // Diagnostic: check if the raw source is available
+                const rawUrlMatch = url.match(/[?&]url=([^&]+)/);
+                if (rawUrlMatch) {
+                  const rawPath = decodeURIComponent(rawUrlMatch[1]);
+                  const baseUrl = new URL(url).origin;
+                  const rawUrl = `${baseUrl}${rawPath}`;
+                  const rawRes = await fetch(rawUrl, { method: 'HEAD' });
+                  broken.push(`${url} (Status: ${res.status}, Raw Status: ${rawRes.status})`);
+                } else {
+                  broken.push(`${url} (Status: ${res.status})`);
+                }
+              }
             } catch (e) {
               broken.push(`${url} (Fetch failed)`);
             }