opennextjs-azure 0.1.2 → 0.1.4

package/README.md

@@ -6,7 +6,7 @@
 [![NPM Downloads](https://img.shields.io/npm/dt/opennextjs-azure)](https://www.npmjs.com/package/opennextjs-azure)
 [![License: MIT](https://img.shields.io/npm/l/opennextjs-azure)](https://opensource.org/licenses/MIT)
 
-Built on the [OpenNext](https://opennext.js.org) framework, this adapter brings native Next.js support to Azure Functions.
+Built on the [OpenNext](https://opennext.js.org) framework, this adapter brings native Next.js support to Azure Functions with a Vercel-grade developer experience.
 
 ![Deploy Screenshot](./docs/deploy-screenshot.png)
 
@@ -23,6 +23,7 @@ Azure Functions is Microsoft's serverless compute platform—comparable to AWS L
 | Next.js Feature                        | Azure Implementation                                            |
 | -------------------------------------- | --------------------------------------------------------------- |
 | Incremental Static Regeneration        | Azure Blob Storage                                              |
+| Image Optimization                     | Azure Blob Storage with automatic caching                       |
 | Streaming SSR                          | Azure Functions with Node.js streams                            |
 | `revalidateTag()` / `revalidatePath()` | Azure Table Storage + Queue Storage                             |
 | Fetch caching                          | Azure Blob Storage with build ID namespacing                    |
@@ -139,6 +140,12 @@ Converts between Azure Functions HTTP triggers and Next.js InternalEvent/Interna
 - **Tag Cache:** Azure Table Storage maps tags → paths for `revalidateTag()`
 - **Revalidation Queue:** Azure Queue Storage triggers on-demand regeneration
 
+**Image Optimization:**
+
+- **Source Images:** Loaded from `assets` blob container
+- **Optimized Cache:** Processed images cached in `optimized-images` container to avoid re-processing
+- **Processing:** Processing is done with the `sharp` library, which gets added for you during deployment.
+
 **Build Process:**  
 Uses OpenNext's AWS build with Azure-specific overrides, then adds Azure Functions metadata (`host.json`, `function.json`) for v3 programming model.
 

package/dist/adapters/image-optimization.d.mts

@@ -0,0 +1,20 @@
+import { InternalEvent, InternalResult } from '@opennextjs/aws/types/open-next.js';
+import { OpenNextHandler, OpenNextHandlerOptions } from '@opennextjs/aws/types/overrides.js';
+
+/**
+ * Azure Image Optimization Handler
+ *
+ * Wraps OpenNext's default image optimization handler with Azure Blob caching.
+ *
+ * When AZURE_IMAGE_OPTIMIZATION_CACHE=true:
+ *   - First request: Loads from "assets", processes, caches in "optimized-images", returns
+ *   - Subsequent requests: Returns from "optimized-images" cache (no processing)
+ *
+ * When AZURE_IMAGE_OPTIMIZATION_CACHE=false:
+ *   - Every request processes the image (no caching)
+ */
+declare function createImageOptimizationHandler(): Promise<OpenNextHandler<InternalEvent, InternalResult>>;
+declare const handler: OpenNextHandler<InternalEvent, InternalResult>;
+declare function defaultHandler(event: InternalEvent, options?: OpenNextHandlerOptions): Promise<InternalResult>;
+
+export { createImageOptimizationHandler, defaultHandler, handler };

package/dist/adapters/image-optimization.d.ts

@@ -0,0 +1,20 @@
+import { InternalEvent, InternalResult } from '@opennextjs/aws/types/open-next.js';
+import { OpenNextHandler, OpenNextHandlerOptions } from '@opennextjs/aws/types/overrides.js';
+
+/**
+ * Azure Image Optimization Handler
+ *
+ * Wraps OpenNext's default image optimization handler with Azure Blob caching.
+ *
+ * When AZURE_IMAGE_OPTIMIZATION_CACHE=true:
+ *   - First request: Loads from "assets", processes, caches in "optimized-images", returns
+ *   - Subsequent requests: Returns from "optimized-images" cache (no processing)
+ *
+ * When AZURE_IMAGE_OPTIMIZATION_CACHE=false:
+ *   - Every request processes the image (no caching)
+ */
+declare function createImageOptimizationHandler(): Promise<OpenNextHandler<InternalEvent, InternalResult>>;
+declare const handler: OpenNextHandler<InternalEvent, InternalResult>;
+declare function defaultHandler(event: InternalEvent, options?: OpenNextHandlerOptions): Promise<InternalResult>;
+
+export { createImageOptimizationHandler, defaultHandler, handler };

package/dist/adapters/image-optimization.js

@@ -0,0 +1,11 @@
+async function createImageOptimizationHandler() {
+  const { defaultHandler: defaultHandler2 } = await import('@opennextjs/aws/adapters/image-optimization-adapter.js');
+  const { createCachedImageOptimizationHandler } = await import('../overrides/imageOptimization/azure-cached.js');
+  return createCachedImageOptimizationHandler(defaultHandler2);
+}
+const handler = await createImageOptimizationHandler();
+async function defaultHandler(event, options) {
+  return handler(event, options);
+}
+
+export { createImageOptimizationHandler, defaultHandler, handler };

package/dist/adapters/wrappers/azure-functions.js

@@ -3,7 +3,6 @@ import { Writable } from 'node:stream';
 const NULL_BODY_STATUSES = /* @__PURE__ */ new Set([101, 204, 205, 304]);
 const STATIC_ASSET_PATTERNS = [
   /^\/_next\/static\//,
-  /^\/_next\/data\//,
   /^\/favicon\.ico$/,
   /^\/robots\.txt$/,
   /^\/sitemap\.xml$/,
@@ -17,11 +16,12 @@ const handler = async (handler2, converter) => async (context, request) => {
     const internalEvent = await converter.convertFrom(request);
     if (isStaticAssetRequest(internalEvent.rawPath)) {
       const blobUrl = `https://${process.env.AZURE_STORAGE_ACCOUNT_NAME}.blob.core.windows.net/assets${internalEvent.rawPath}`;
+      const cacheControl = internalEvent.rawPath.startsWith("/_next/static/") ? "public, max-age=31536000, immutable" : "public, max-age=0, must-revalidate";
       context.res = {
         status: 301,
         headers: {
           Location: blobUrl,
-          "Cache-Control": "public, max-age=31536000, immutable"
+          "Cache-Control": cacheControl
         }
       };
       return;

package/dist/adapters/wrappers/azure-image-optimization.d.mts

@@ -0,0 +1,10 @@
+import { InternalEvent, InternalResult } from '@opennextjs/aws/types/open-next.js';
+import { WrapperHandler } from '@opennextjs/aws/types/overrides.js';
+
+declare const _default: {
+    name: string;
+    wrapper: WrapperHandler<InternalEvent, InternalResult>;
+    supportStreaming: boolean;
+};
+
+export { _default as default };

package/dist/adapters/wrappers/azure-image-optimization.d.ts

@@ -0,0 +1,10 @@
+import { InternalEvent, InternalResult } from '@opennextjs/aws/types/open-next.js';
+import { WrapperHandler } from '@opennextjs/aws/types/overrides.js';
+
+declare const _default: {
+    name: string;
+    wrapper: WrapperHandler<InternalEvent, InternalResult>;
+    supportStreaming: boolean;
+};
+
+export { _default as default };

package/dist/adapters/wrappers/azure-image-optimization.js

@@ -0,0 +1,151 @@
+import { Writable } from 'node:stream';
+import { createHash } from 'node:crypto';
+import { BlobServiceClient } from '@azure/storage-blob';
+
+const NULL_BODY_STATUSES = /* @__PURE__ */ new Set([101, 204, 205, 304]);
+const { AZURE_STORAGE_CONNECTION_STRING, AZURE_STORAGE_ACCOUNT_NAME } = process.env;
+const CACHE_CONTAINER = "optimized-images";
+function getBlobClient(key) {
+  if (!AZURE_STORAGE_CONNECTION_STRING && !AZURE_STORAGE_ACCOUNT_NAME) {
+    throw new Error("Azure Storage connection string or account name must be defined");
+  }
+  const blobServiceClient = AZURE_STORAGE_CONNECTION_STRING ? BlobServiceClient.fromConnectionString(AZURE_STORAGE_CONNECTION_STRING) : new BlobServiceClient(`https://${AZURE_STORAGE_ACCOUNT_NAME}.blob.core.windows.net`);
+  const containerClient = blobServiceClient.getContainerClient(CACHE_CONTAINER);
+  return containerClient.getBlockBlobClient(key);
+}
+function computeCacheKey(event) {
+  const { query } = event;
+  const url = Array.isArray(query?.url) ? query.url[0] : query?.url || "";
+  const width = Array.isArray(query?.w) ? query.w[0] : query?.w || "0";
+  const quality = Array.isArray(query?.q) ? query.q[0] : query?.q || "75";
+  const hash = createHash("sha256").update(url).digest("hex").substring(0, 16);
+  return `${hash}/w${width}_q${quality}.cache`;
+}
+async function getCachedImage(cacheKey) {
+  try {
+    const blobClient = getBlobClient(cacheKey);
+    const exists = await blobClient.exists();
+    if (!exists) {
+      return null;
+    }
+    const downloadResponse = await blobClient.download();
+    if (!downloadResponse.readableStreamBody) {
+      return null;
+    }
+    const chunks = [];
+    for await (const chunk of downloadResponse.readableStreamBody) {
+      chunks.push(Buffer.from(chunk));
+    }
+    return Buffer.concat(chunks);
+  } catch (error) {
+    return null;
+  }
+}
+async function setCachedImage(cacheKey, buffer, contentType) {
+  try {
+    const blobClient = getBlobClient(cacheKey);
+    await blobClient.upload(buffer, buffer.length, {
+      blobHTTPHeaders: {
+        blobContentType: contentType,
+        blobCacheControl: "public,max-age=31536000,immutable"
+      }
+    });
+    process.stderr.write(`[ImageCache] \u2713 Cached ${buffer.length} bytes
+`);
+  } catch (error) {
+    process.stderr.write(`[ImageCache] \u2717 Cache failed: ${error.message}
+`);
+  }
+}
+const handler = async (handler2, converter) => async (context, request) => {
+  try {
+    const internalEvent = await converter.convertFrom(request);
+    const cacheKey = computeCacheKey(internalEvent);
+    const cachedBuffer = await getCachedImage(cacheKey);
+    if (cachedBuffer) {
+      process.stderr.write(`[ImageCache] \u2713 Cache HIT
+`);
+      context.res = {
+        status: 200,
+        headers: {
+          "Content-Type": "image/webp",
+          "Cache-Control": "public,max-age=31536000,immutable"
+        },
+        body: cachedBuffer
+      };
+      return;
+    }
+    process.stderr.write(`[ImageCache] Cache MISS - processing...
+`);
+    let streamFinished = null;
+    let resolveStream = null;
+    let processedBuffer = null;
+    let responseContentType = "image/webp";
+    const streamCreator = {
+      writeHeaders(prelude) {
+        const { statusCode, cookies, headers } = prelude;
+        responseContentType = headers["Content-Type"] || headers["content-type"] || "image/webp";
+        const responseHeaders = { ...headers };
+        if (cookies.length > 0) {
+          responseHeaders["set-cookie"] = cookies.join(", ");
+        }
+        if (NULL_BODY_STATUSES.has(statusCode)) {
+          context.res = {
+            status: statusCode,
+            headers: responseHeaders
+          };
+          return new Writable({
+            write(_chunk, _encoding, callback) {
+              callback();
+            }
+          });
+        }
+        streamFinished = new Promise((resolve) => {
+          resolveStream = resolve;
+        });
+        const chunks = [];
+        const writable = new Writable({
+          write(chunk, _encoding, callback) {
+            chunks.push(Buffer.from(chunk));
+            callback();
+          },
+          final(callback) {
+            const body = Buffer.concat(chunks);
+            processedBuffer = body;
+            context.res = {
+              status: statusCode,
+              headers: responseHeaders,
+              body
+            };
+            callback();
+            resolveStream?.();
+          }
+        });
+        return writable;
+      }
+    };
+    await handler2(internalEvent, { streamCreator });
+    if (streamFinished) {
+      await streamFinished;
+    }
+    if (processedBuffer && responseContentType) {
+      await setCachedImage(cacheKey, processedBuffer, responseContentType);
+    }
+  } catch (error) {
+    console.error("Image optimization error:", error);
+    context.res = {
+      status: 500,
+      headers: {
+        "Content-Type": "text/plain"
+      },
+      body: "Internal server error"
+    };
+  }
+};
+const azureImageOptimization = {
+  name: "azure-image-optimization",
+  wrapper: handler,
+  supportStreaming: true
+};
+
+export { azureImageOptimization as default };

package/dist/cli/index.js

@@ -222,6 +222,27 @@ async function checkStorageAccount(appName, resourceGroup, environment) {
         details: `Status: ${account.Status}`
       };
     }
+    try {
+      const { stdout: staticFileStdout } = await execAsync$1(
+        `az storage blob list --account-name ${account.Name} --container-name assets --prefix _next/static --query '[0].name' -o tsv --only-show-errors 2>/dev/null || echo ""`
+      );
+      const sampleFile = staticFileStdout.trim();
+      if (sampleFile) {
+        const { stdout: cacheStdout } = await execAsync$1(
+          `az storage blob show --account-name ${account.Name} --container-name assets --name '${sampleFile}' --query 'properties.contentSettings.cacheControl' -o tsv --only-show-errors 2>/dev/null || echo ""`
+        );
+        const cacheControl = cacheStdout.trim();
+        const expectedCache = "public, max-age=31536000, immutable";
+        if (cacheControl !== expectedCache) {
+          return {
+            passed: false,
+            message: "Static asset cache headers misconfigured",
+            details: `${sampleFile.split("/").pop()} has '${cacheControl || "none"}' (expected '${expectedCache}')`
+          };
+        }
+      }
+    } catch {
+    }
     return {
       passed: true,
       message: "Storage account healthy",
@@ -296,11 +317,23 @@ async function checkFunctionAppStatus(appName, resourceGroup, environment) {
         details: `State: ${funcApp.State}`
       };
     }
-    return {
-      passed: true,
-      message: "Function app running",
-      details: `URL: https://${funcApp.DefaultHostName}`
-    };
+    const url = `https://${funcApp.DefaultHostName}`;
+    try {
+      const startTime = Date.now();
+      await execAsync$1(`curl -I -s -o /dev/null -w "%{http_code}" --max-time 10 "${url}" || echo "000"`);
+      const responseTime = Date.now() - startTime;
+      return {
+        passed: true,
+        message: "Function app running and responding",
+        details: `URL: ${url} (${responseTime}ms)`
+      };
+    } catch {
+      return {
+        passed: true,
+        message: "Function app running",
+        details: `URL: ${url} (HTTP check failed, but app is running)`
+      };
+    }
   } catch (error) {
     return {
       passed: false,
@@ -500,7 +533,7 @@ program.command("init").description("Initialize Azure infrastructure in your pro
 program.command("build").description("Build Next.js app for Azure deployment").option("-c, --config <path>", "Path to open-next.config.ts file").action(async (options) => {
   await build(options.config);
 });
-program.command("deploy").description("Deploy Next.js app to Azure (provisions infrastructure + deploys)").option("-n, --app-name <name>", "Application name (overrides azure.config.json)").option("-g, --resource-group <name>", "Azure resource group name").option("-l, --location <location>", "Azure region").option("-e, --environment <env>", "Environment: dev, staging, or prod").option("--skip-infrastructure", "Skip infrastructure provisioning").action(async (options) => {
+program.command("deploy").description("Deploy Next.js app to Azure (provisions infrastructure + deploys)").option("-n, --app-name <name>", "Application name (overrides azure.config.json)").option("-g, --resource-group <name>", "Azure resource group name").option("-l, --location <location>", "Azure region").option("-e, --environment <env>", "Environment: dev, staging, or prod").option("--skip-infrastructure", "Skip infrastructure provisioning").option("--skip-resource-checks", "Skip Azure resource validation checks (permissions, quota, providers)").action(async (options) => {
   await deploy(options);
 });
 program.command("tail").description("Open Azure Portal Log Stream in browser (live logs)").option("-n, --app-name <name>", "Application name").option("-g, --resource-group <name>", "Azure resource group name").action(async (options) => {

package/dist/config/index.d.mts

@@ -1,3 +1,3 @@
 import '@opennextjs/aws/types/open-next.js';
-export { d as defineAzureConfig, g as getAzureConfig } from '../shared/opennextjs-azure.d619537c.mjs';
+export { d as defineAzureConfig, g as getAzureConfig } from '../shared/opennextjs-azure.279bd73d.mjs';
 import '@opennextjs/aws/types/overrides.js';

package/dist/config/index.d.ts

@@ -1,3 +1,3 @@
 import '@opennextjs/aws/types/open-next.js';
-export { d as defineAzureConfig, g as getAzureConfig } from '../shared/opennextjs-azure.d619537c.js';
+export { d as defineAzureConfig, g as getAzureConfig } from '../shared/opennextjs-azure.279bd73d.js';
 import '@opennextjs/aws/types/overrides.js';

package/dist/config/index.js

@@ -14,6 +14,9 @@ function defineAzureConfig(config = {}) {
     middleware: config.middleware || {
       external: false
     },
+    imageOptimization: {
+      loader: resolveImageLoader(config.imageLoader)
+    },
     dangerous: config.dangerous,
     buildCommand: config.buildCommand,
     buildOutputPath: config.buildOutputPath || ".",
@@ -48,6 +51,15 @@ function resolveQueue(value) {
   }
   return () => value;
 }
+function resolveImageLoader(value) {
+  if (!value || value === "azure-blob") {
+    return () => import('../overrides/imageLoader/azure-blob.js').then((m) => m.default);
+  }
+  if (typeof value === "function") {
+    return value;
+  }
+  return () => value;
+}
 function getAzureConfig() {
   return {
     deployment: {