opennextjs-azure 0.1.1 → 0.1.3

package/README.md

@@ -1,12 +1,14 @@
 # OpenNext.js Azure
 
-**True serverless Next.js on Azure Functions**
+**True serverless Next.js on Azure Functions** (EXPERIMENTAL)
 
 [![NPM Version](https://img.shields.io/npm/v/opennextjs-azure)](https://www.npmjs.com/package/opennextjs-azure)
 [![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)
 
 > **🚀 New to Azure deployment?** Jump to [Quick Start](#quick-start) and run `npx opennextjs-azure@latest init --scaffold` to create a fully configured Next.js app on Azure in seconds!
 
@@ -21,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                    |
@@ -118,6 +121,8 @@ Response Stream → Azure Functions Response
 - Environment variables
 - Connection strings
 
+![Resource Group Screenshot](./docs/rg-screenshot.png)
+
 Choose your environment:
 
 - `--environment dev` → Y1 Consumption (pay-per-execution)
@@ -135,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.
 
@@ -183,6 +194,17 @@ opennextjs-azure deploy \
 opennextjs-azure tail \
   [--app-name <name>] \
   [--resource-group <name>]
+
+# Check deployment health
+opennextjs-azure health \
+  [--app-name <name>] \
+  [--resource-group <name>]
+
+# Delete resource group and all resources
+opennextjs-azure delete \
+  [--resource-group <name>] \
+  [--yes] \
+  [--no-wait]
 ```
 
 ## License

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;
@@ -82,13 +82,16 @@ const handler = async (handler2, converter) => async (context, request) => {
       };
     }
   } catch (error) {
+    const isProduction = process.env.NODE_ENV === "production";
     context.res = {
       status: 500,
       headers: { "content-type": "application/json" },
       body: JSON.stringify({
         error: "Internal Server Error",
-        message: error instanceof Error ? error.message : String(error),
-        stack: error instanceof Error ? error.stack : void 0
+        ...isProduction ? {} : {
+          message: error instanceof Error ? error.message : String(error),
+          stack: error instanceof Error ? error.stack : void 0
+        }
       })
     };
   }

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 };