opennextjs-azure 0.1.2 → 0.1.3

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,

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: {

package/dist/deploy.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url';
 import { exec } from 'node:child_process';
 import { promisify } from 'node:util';
 import { build as build$1 } from '@opennextjs/aws/build.js';
-import fs$1 from 'node:fs';
+import fs$1, { existsSync } from 'node:fs';
 import readline from 'node:readline';
 
 const execAsync$3 = promisify(exec);
@@ -61,6 +61,42 @@ async function scaffoldProject(targetDir, options = {}) {
   });
   await execAsync$3("pnpm install", { cwd: targetDir });
   console.log("Dependencies installed\n");
+  const pagePath = path.join(targetDir, srcDir ? "src/app/page.tsx" : "app/page.tsx");
+  let pageContent = await fs.readFile(pagePath, "utf-8");
+  pageContent = pageContent.replace(
+    /<Image className="dark:invert" src="\/next\.svg" alt="Next\.js logo" width=\{180\} height=\{38\} priority \/>/,
+    `<div className="flex items-center gap-4">
+                    <Image className="dark:invert" src="/next.svg" alt="Next.js logo" width={180} height={38} priority />
+                    <span className="text-2xl text-gray-400 dark:text-gray-600">+</span>
+                    <Image src="/azure.png" alt="Azure logo" width={38} height={38} priority />
+                </div>`
+  );
+  pageContent = pageContent.replace(
+    /href="https:\/\/vercel\.com\/new[^"]*"/,
+    'href="https://github.com/zpg6/opennextjs-azure"'
+  );
+  pageContent = pageContent.replace(
+    /className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background/,
+    'className="rounded-full border border-solid border-blue-400 transition-colors flex items-center justify-center bg-blue-500/10'
+  );
+  pageContent = pageContent.replace(/hover:bg-\[#383838\] dark:hover:bg-\[#ccc\]/, "hover:bg-blue-500/20");
+  pageContent = pageContent.replace(
+    /<Image className="dark:invert" src="\/vercel\.svg" alt="Vercel logomark" width=\{20\} height=\{20\} \/>/,
+    '<Image src="/azure.png" alt="Azure logomark" width={20} height={20} />'
+  );
+  pageContent = pageContent.replace(/>Deploy now</, ">Deploy to Azure<");
+  await fs.writeFile(pagePath, pageContent);
+  const publicDir = path.join(targetDir, "public");
+  const azureLogoSource = path.join(
+    path.dirname(new URL(import.meta.url).pathname),
+    "../../examples/basic-app/public/azure.png"
+  );
+  const azureLogoDest = path.join(publicDir, "azure.png");
+  try {
+    await fs.copyFile(azureLogoSource, azureLogoDest);
+  } catch (error) {
+    console.warn("Warning: Could not copy Azure logo. You can add it manually to public/azure.png");
+  }
   console.log("Creating open-next.config.ts...");
   const openNextConfig = `// @ts-nocheck
 export default {
@@ -78,6 +114,17 @@ export default {
     middleware: {
         external: false,
     },
+    imageOptimization: {
+        loader: () => import("./node_modules/opennextjs-azure/dist/overrides/imageLoader/azure-blob.js").then(m => m.default),
+        override: {
+            wrapper: () => import("./node_modules/opennextjs-azure/dist/adapters/wrappers/azure-image-optimization.js").then(m => m.default),
+            converter: () => import("./node_modules/opennextjs-azure/dist/adapters/converters/azure-http.js").then(m => m.default),
+        },
+        install: {
+            packages: ["@img/sharp-linux-x64@0.33.5", "sharp@0.33.5"],
+            additionalArgs: "--force --ignore-scripts",
+        },
+    },
     buildOutputPath: ".",
     appPath: ".",
 };
@@ -253,8 +300,48 @@ async function prepareFunctions() {
     entryPoint: "handler"
   };
   await fs.writeFile(path.join(functionDir, "function.json"), JSON.stringify(functionJson, null, 2));
-  console.log(`  ${greenCheck()} Azure Functions metadata created
-`);
+  const imageOptDir = path.join(process.cwd(), ".open-next/image-optimization-function");
+  try {
+    await fs.access(imageOptDir);
+    console.log("  Adding image optimization function...");
+    const imageFunctionDir = path.join(functionsDir, "image-optimization");
+    await fs.mkdir(imageFunctionDir, { recursive: true });
+    const imageFunctionJson = {
+      bindings: [
+        {
+          authLevel: "anonymous",
+          type: "httpTrigger",
+          direction: "in",
+          name: "req",
+          methods: ["get", "head"],
+          route: "_next/image"
+        },
+        {
+          type: "http",
+          direction: "out",
+          name: "res"
+        }
+      ],
+      scriptFile: "../index-image.mjs",
+      entryPoint: "handler"
+    };
+    await fs.writeFile(path.join(imageFunctionDir, "function.json"), JSON.stringify(imageFunctionJson, null, 2));
+    await fs.copyFile(path.join(imageOptDir, "index.mjs"), path.join(functionsDir, "index-image.mjs"));
+    await fs.cp(path.join(imageOptDir, ".next"), path.join(functionsDir, ".next"), {
+      recursive: true,
+      force: false
+    });
+    try {
+      await fs.copyFile(
+        path.join(imageOptDir, "open-next.config.mjs"),
+        path.join(functionsDir, "open-next.config.mjs")
+      );
+    } catch {
+    }
+    console.log(`  ${greenCheck()} Image optimization function added`);
+  } catch {
+  }
+  console.log(`  ${greenCheck()} Azure Functions metadata created`);
   console.log("Installing minimal runtime dependencies...");
   try {
     const originalPackageJson = JSON.parse(await fs.readFile(path.join(functionsDir, "package.json"), "utf-8"));
@@ -274,23 +361,33 @@ async function prepareFunctions() {
     await execAsync$2("npm install --production --no-package-lock --loglevel=error", {
       cwd: functionsDir
     });
-    console.log(`  ${greenCheck()} Runtime dependencies installed
-`);
+    console.log(`  ${greenCheck()} Runtime dependencies installed`);
   } catch (error) {
     console.error("Failed to install dependencies:", error.message);
     throw error;
   }
+  const imageOptDir2 = path.join(process.cwd(), ".open-next/image-optimization-function");
+  try {
+    await fs.access(imageOptDir2);
+    console.log("Installing Sharp with Linux x64 binaries for image optimization...");
+    await execAsync$2(
+      "npm install --force sharp@0.33.5 @img/sharp-linux-x64@0.33.5 @img/sharp-libvips-linux-x64@1.0.4",
+      { cwd: functionsDir }
+    );
+    console.log(`  ${greenCheck()} Sharp with Linux x64 binaries installed`);
+  } catch (error) {
+  }
 }
 
 async function build(configPath) {
-  console.log("Building Next.js app for Azure...\n");
+  console.log("Building Next.js app for Azure...");
   const baseDir = process.cwd();
   const userConfigPath = configPath || "open-next.config.ts";
   const absoluteUserConfigPath = path.join(baseDir, userConfigPath);
   let resolvedConfigPath = userConfigPath;
   let tempConfigPath = null;
   if (!fs$1.existsSync(absoluteUserConfigPath)) {
-    console.log("No open-next.config.ts found, using default Azure configuration\n");
+    console.log("No open-next.config.ts found, using default Azure configuration");
     const { createRequire } = await import('node:module');
     const require = createRequire(import.meta.url);
     const packagePath = path.dirname(require.resolve("opennextjs-azure/package.json"));
@@ -328,20 +425,17 @@ export default {
     if (fs$1.existsSync(openNextPath)) {
       console.log("Cleaning previous build output...");
       fs$1.rmSync(openNextPath, { recursive: true, force: true });
-      console.log(`  ${greenCheck()} Previous build cleaned
-`);
+      console.log(`  ${greenCheck()} Previous build cleaned`);
     }
     console.log("Running OpenNext build...");
     const externals = ["@opennextjs/aws"].join(",");
     await build$1(resolvedConfigPath, externals);
-    console.log(`  ${greenCheck()} OpenNext build complete
-`);
     await prepareFunctions();
     console.log("Build completed successfully!");
-    console.log("\nOutput: .open-next/");
+    console.log("Output: .open-next/");
     console.log("  \u251C\u2500\u2500 server-functions/default  (Azure Functions app)");
-    console.log("  \u2514\u2500\u2500 assets                    (Static files)\n");
-    console.log("Next: opennextjs-azure deploy\n");
+    console.log("  \u2514\u2500\u2500 assets                    (Static files)");
+    console.log("Next: opennextjs-azure deploy");
   } catch (error) {
     console.error("Build failed:", error);
     process.exit(1);
@@ -367,8 +461,7 @@ async function deploy$1(options) {
     environment = "dev",
     skipInfrastructure = false
   } = options;
-  console.log(`Deploying ${appName} to Azure (${environment} environment)
-`);
+  console.log(`Deploying ${appName} to Azure (${environment} environment)`);
   try {
     await checkAzureCLI();
     await checkAzureLogin();
@@ -386,8 +479,7 @@ async function deploy$1(options) {
       console.log("Provisioning Azure infrastructure...");
       console.log(`  Resource Group: ${resourceGroup}`);
       console.log(`  Location: ${location}`);
-      console.log(`  Environment: ${environment}
-`);
+      console.log(`  Environment: ${environment}`);
       deploymentOutputs = await provisionInfrastructure({
         appName,
         resourceGroup,
@@ -395,20 +487,17 @@ async function deploy$1(options) {
         environment,
         applicationInsights: options.applicationInsights ?? false
       });
-      console.log(`  ${greenCheck()} Infrastructure ready
-`);
+      console.log(`  ${greenCheck()} Infrastructure ready`);
     } else {
-      console.log("Skipping infrastructure provisioning\n");
+      console.log("Skipping infrastructure provisioning");
     }
     console.log("Uploading static assets...");
     await uploadStaticAssets(appName, resourceGroup);
-    console.log(`  ${greenCheck()} Assets uploaded
-`);
+    console.log(`  ${greenCheck()} Assets uploaded`);
     console.log("Deploying Function App...");
     const functionAppName = deploymentOutputs?.functionApp || `${appName}-func-${environment}`;
     await deployFunctionApp(functionAppName, resourceGroup);
-    console.log(`  ${greenCheck()} Function App deployed
-`);
+    console.log(`  ${greenCheck()} Function App deployed`);
     await performPostflightChecks(
       resourceGroup,
       functionAppName,
@@ -438,11 +527,17 @@ async function checkAzureLogin() {
   }
 }
 async function checkRequiredProviders(applicationInsights) {
-  const requiredProviders = ["Microsoft.Web", "Microsoft.Storage", "Microsoft.Compute", "Microsoft.Quota"];
+  const requiredProviders = [
+    "Microsoft.Web",
+    "Microsoft.Storage",
+    "Microsoft.Compute",
+    "Microsoft.Quota",
+    "Microsoft.ServiceLinker"
+  ];
   if (applicationInsights) {
     requiredProviders.push("Microsoft.AlertsManagement");
   }
-  console.log("Checking Azure resource providers...\n");
+  console.log("Checking Azure resource providers...");
   for (const provider of requiredProviders) {
     const { stdout } = await execAsync$1(
       `az provider show --namespace ${provider} --query "registrationState" -o tsv`
@@ -451,8 +546,7 @@ async function checkRequiredProviders(applicationInsights) {
     if (state !== "Registered") {
       console.log(`Registering ${provider}...`);
       await execAsync$1(`az provider register --namespace ${provider} --wait`);
-      console.log(`  ${greenCheck()} ${provider} registered
-`);
+      console.log(`  ${greenCheck()} ${provider} registered`);
     }
   }
 }
@@ -480,16 +574,13 @@ async function checkQuotaAvailability(location, environment) {
       console.error(`
 ${redX()} Quota Error: No quota available for ${environment} environment`);
       console.error(`  Required: ${requiredSku.name}`);
-      console.error(`  Current Limit: ${requiredSku.quota}
-`);
+      console.error(`  Current Limit: ${requiredSku.quota}`);
       if (y1Limit > 0 && environment !== "dev") {
         console.log(`  Suggestion: Deploy to dev environment instead (has quota: ${y1Limit})`);
-        console.log(`  Command: opennextjs-azure deploy --environment dev
-`);
+        console.log(`  Command: opennextjs-azure deploy --environment dev`);
       } else if (ep1Limit > 0 && environment === "dev") {
         console.log(`  Suggestion: Deploy to prod environment instead (has quota: ${ep1Limit})`);
-        console.log(`  Command: opennextjs-azure deploy --environment prod
-`);
+        console.log(`  Command: opennextjs-azure deploy --environment prod`);
       } else {
         console.log(`  To request quota increase:`);
         console.log(
@@ -502,16 +593,13 @@ ${redX()} Quota Error: No quota available for ${environment} environment`);
       }
       throw new Error(`No ${requiredSku.type} quota available for ${environment} environment in ${location}`);
     }
-    console.log(`  ${greenCheck()} ${requiredSku.name}: ${requiredSku.quota} instances available
-`);
+    console.log(`  ${greenCheck()} ${requiredSku.name}: ${requiredSku.quota} instances available`);
     if (environment === "dev" && ep1Limit > 0) {
       console.log(
-        `  Premium tier also available (${ep1Limit} instances) - use --environment prod for better performance
-`
+        `  Premium tier also available (${ep1Limit} instances) - use --environment prod for better performance`
       );
     } else if (environment !== "dev" && y1Limit > 0) {
-      console.log(`  Consumption tier available (${y1Limit} instances) - use --environment dev for lower cost
-`);
+      console.log(`  Consumption tier available (${y1Limit} instances) - use --environment dev for lower cost`);
     }
   } catch (error) {
     if (error.message?.includes("No") && error.message?.includes("quota available")) {
@@ -552,8 +640,7 @@ async function checkLocation(location) {
 Available regions: ${available.trim().split("\n").slice(0, 10).join(", ")}`
       );
     }
-    console.log(`  ${greenCheck()} Region: ${locations[0].DisplayName} (${location})
-`);
+    console.log(`  ${greenCheck()} Region: ${locations[0].DisplayName} (${location})`);
   } catch (error) {
     if (error.message.includes("Invalid location")) {
       throw error;
@@ -584,8 +671,7 @@ Run 'opennextjs-azure build' to regenerate`
       );
     }
   }
-  console.log(`  ${greenCheck()} Build output structure valid
-`);
+  console.log(`  ${greenCheck()} Build output structure valid`);
 }
 async function checkExistingInfrastructure(appName, resourceGroup, environment) {
   console.log("Checking existing infrastructure...");
@@ -641,16 +727,16 @@ async function performPostflightChecks(resourceGroup, functionAppName, location,
     console.log("\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550");
     console.log(`${greenCheck()} Deployment Complete!`);
     console.log("\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550");
-    console.log("\nApplication:");
+    console.log("Application:");
     console.log(`  App URL:          ${functionUrl}`);
     console.log(`  Assets URL:       ${assetsUrl}`);
     console.log(`  Status:           ${funcApp.State}`);
     console.log(`  Type:             ${funcApp.Kind}`);
-    console.log("\nInfrastructure:");
+    console.log("Infrastructure:");
     console.log(`  Resource Group:   ${resourceGroup}`);
     console.log(`  Region:           ${location}`);
     console.log(`  Environment:      ${environment}`);
-    console.log("\nConfiguration:");
+    console.log("Configuration:");
     console.log(`  App Service Plan: ${plan.Tier} (${plan.Sku})`);
     console.log(`  Storage Account:  ${storage.Name} (${storage.Sku})`);
     console.log(`  Capacity:         ${plan.Capacity || 1} instance(s)`);
@@ -665,9 +751,7 @@ async function performPostflightChecks(resourceGroup, functionAppName, location,
       }
     }
     console.log("\nQuick Actions:");
-    console.log(
-      `  View logs:        az functionapp log tail --name ${functionAppName} --resource-group ${resourceGroup}`
-    );
+    console.log(`  View logs:        npx opennextjs-azure@latest tail`);
     console.log(`  Open in portal:   ${portalUrl}`);
     console.log("\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n");
     if (funcApp.State !== "Running") {
@@ -705,15 +789,36 @@ async function provisionInfrastructure(options) {
   );
   return JSON.parse(stdout);
 }
+async function patchCSSForBlobStorage(assetsPath) {
+  const cssPath = path.join(assetsPath, "_next/static/css");
+  if (!existsSync(cssPath)) {
+    return;
+  }
+  const files = await fs.readdir(cssPath);
+  const cssFiles = files.filter((f) => f.endsWith(".css"));
+  for (const file of cssFiles) {
+    const filePath = path.join(cssPath, file);
+    let content = await fs.readFile(filePath, "utf-8");
+    content = content.replace(/url\(\s*(['"]?)(\/_next\/static\/media\/[^'")\s]+)\1\s*\)/g, "url($1/assets$2$1)");
+    await fs.writeFile(filePath, content, "utf-8");
+  }
+}
 async function uploadStaticAssets(appName, resourceGroup) {
   const assetsPath = path.join(process.cwd(), ".open-next/assets");
+  await patchCSSForBlobStorage(assetsPath);
   const { stdout } = await execAsync$1(
     `az storage account list --resource-group ${resourceGroup} --query "[0].name" -o tsv`
   );
   const storageAccountName = stdout.trim();
   await execAsync$1(
-    `az storage blob upload-batch       --account-name ${storageAccountName}       --destination assets       --source ${assetsPath}       --overwrite`
+    `az storage blob upload-batch       --account-name ${storageAccountName}       --destination assets       --source ${assetsPath}       --content-cache-control "public, max-age=0, must-revalidate"       --overwrite`
   );
+  const nextStaticPath = path.join(assetsPath, "_next/static");
+  if (existsSync(nextStaticPath)) {
+    await execAsync$1(
+      `az storage blob upload-batch         --account-name ${storageAccountName}         --destination assets         --source ${nextStaticPath}         --destination-path _next/static         --content-cache-control "public, max-age=31536000, immutable"         --overwrite`
+    );
+  }
 }
 async function deployFunctionApp(functionAppName, resourceGroup) {
   const functionsPath = path.join(process.cwd(), ".open-next/server-functions/default");

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { A as AzureConfig, a as AzureDeploymentTarget, d as defineAzureConfig } from './shared/opennextjs-azure.d619537c.mjs';
+export { A as AzureConfig, a as AzureDeploymentTarget, d as defineAzureConfig } from './shared/opennextjs-azure.279bd73d.mjs';
 export { default as azureBlobCache } from './overrides/incrementalCache/azure-blob.mjs';
 export { default as azureTableTagCache } from './overrides/tagCache/azure-table.mjs';
 export { default as azureQueueRevalidation } from './overrides/queue/azure-queue.mjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AzureConfig, a as AzureDeploymentTarget, d as defineAzureConfig } from './shared/opennextjs-azure.d619537c.js';
+export { A as AzureConfig, a as AzureDeploymentTarget, d as defineAzureConfig } from './shared/opennextjs-azure.279bd73d.js';
 export { default as azureBlobCache } from './overrides/incrementalCache/azure-blob.js';
 export { default as azureTableTagCache } from './overrides/tagCache/azure-table.js';
 export { default as azureQueueRevalidation } from './overrides/queue/azure-queue.js';

package/dist/infrastructure/main.bicep

@@ -96,6 +96,14 @@ resource storageAccount 'Microsoft.Storage/storageAccounts@2023-01-01' = {
         publicAccess: 'Blob'
       }
     }
+
+    // Container for optimized images (public CDN access)
+    resource optimizedImagesContainer 'containers' = {
+      name: 'optimized-images'
+      properties: {
+        publicAccess: 'Blob'
+      }
+    }
   }
 
   // Table service for tag cache
@@ -194,6 +202,10 @@ resource functionApp 'Microsoft.Web/sites@2023-01-01' = {
           name: 'AZURE_QUEUE_NAME'
           value: queueName
         }
+        {
+          name: 'AZURE_IMAGE_OPTIMIZATION_CACHE'
+          value: 'true'
+        }
         {
           name: 'NODE_ENV'
           value: 'production'

package/dist/overrides/imageLoader/azure-blob.d.mts

@@ -0,0 +1,5 @@
+import { ImageLoader } from '@opennextjs/aws/types/overrides.js';
+
+declare const azureBlobImageLoader: ImageLoader;
+
+export { azureBlobImageLoader as default };

package/dist/overrides/imageLoader/azure-blob.d.ts

@@ -0,0 +1,5 @@
+import { ImageLoader } from '@opennextjs/aws/types/overrides.js';
+
+declare const azureBlobImageLoader: ImageLoader;
+
+export { azureBlobImageLoader as default };

package/dist/overrides/imageLoader/azure-blob.js

@@ -0,0 +1,37 @@
+import { Readable } from 'node:stream';
+
+const { AZURE_STORAGE_ACCOUNT_NAME } = process.env;
+const azureBlobImageLoader = {
+  name: "azure-blob",
+  load: async (key) => {
+    if (!AZURE_STORAGE_ACCOUNT_NAME) {
+      throw new Error("AZURE_STORAGE_ACCOUNT_NAME must be defined");
+    }
+    const cleanKey = key.replace(/^\//, "");
+    const blobUrl = `https://${AZURE_STORAGE_ACCOUNT_NAME}.blob.core.windows.net/assets/${cleanKey}`;
+    try {
+      const response = await fetch(blobUrl);
+      if (response.status === 404) {
+        throw new Error(`Image not found in blob storage: ${cleanKey}`);
+      }
+      if (!response.ok) {
+        throw new Error(`Failed to fetch image. Status: ${response.status}`);
+      }
+      if (!response.body) {
+        throw new Error("No body in fetch response");
+      }
+      const arrayBuffer = await response.arrayBuffer();
+      const buffer = Buffer.from(arrayBuffer);
+      const body = Readable.from(buffer);
+      return {
+        body,
+        contentType: response.headers.get("content-type") ?? void 0,
+        cacheControl: response.headers.get("cache-control") ?? void 0
+      };
+    } catch (error) {
+      throw new Error(`Failed to load image from Azure Blob: ${error.message}`);
+    }
+  }
+};
+
+export { azureBlobImageLoader as default };

package/dist/overrides/imageOptimization/azure-cached.d.mts

@@ -0,0 +1,6 @@
+import { InternalEvent, InternalResult } from '@opennextjs/aws/types/open-next.js';
+import { OpenNextHandler } from '@opennextjs/aws/types/overrides.js';
+
+declare function createCachedImageOptimizationHandler(defaultHandler: OpenNextHandler<InternalEvent, InternalResult>): OpenNextHandler<InternalEvent, InternalResult>;
+
+export { createCachedImageOptimizationHandler };

package/dist/overrides/imageOptimization/azure-cached.d.ts

@@ -0,0 +1,6 @@
+import { InternalEvent, InternalResult } from '@opennextjs/aws/types/open-next.js';
+import { OpenNextHandler } from '@opennextjs/aws/types/overrides.js';
+
+declare function createCachedImageOptimizationHandler(defaultHandler: OpenNextHandler<InternalEvent, InternalResult>): OpenNextHandler<InternalEvent, InternalResult>;
+
+export { createCachedImageOptimizationHandler };

package/dist/overrides/imageOptimization/azure-cached.js

@@ -0,0 +1,115 @@
+import { createHash } from 'node:crypto';
+import { BlobServiceClient } from '@azure/storage-blob';
+import { ReadableStream } from 'node:stream/web';
+
+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();
+    const properties = await blobClient.getProperties();
+    if (!downloadResponse.readableStreamBody) {
+      return null;
+    }
+    const chunks = [];
+    for await (const chunk of downloadResponse.readableStreamBody) {
+      chunks.push(Buffer.from(chunk));
+    }
+    const buffer = Buffer.concat(chunks);
+    return {
+      type: "core",
+      statusCode: 200,
+      headers: {
+        "Content-Type": properties.contentType || "image/webp",
+        "Cache-Control": properties.cacheControl || "public,max-age=31536000,immutable",
+        Vary: "Accept"
+      },
+      body: new ReadableStream({
+        start(controller) {
+          controller.enqueue(buffer);
+          controller.close();
+        }
+      }),
+      isBase64Encoded: true
+    };
+  } catch (error) {
+    return null;
+  }
+}
+async function setCachedImage(cacheKey, result) {
+  try {
+    if (!result.body) {
+      return;
+    }
+    const chunks = [];
+    for await (const chunk of result.body) {
+      chunks.push(Buffer.from(chunk));
+    }
+    const buffer = Buffer.concat(chunks);
+    const blobClient = getBlobClient(cacheKey);
+    const contentTypeRaw = result.headers?.["Content-Type"] || result.headers?.["content-type"];
+    const contentType = Array.isArray(contentTypeRaw) ? contentTypeRaw[0] : contentTypeRaw || "image/webp";
+    const cacheControlRaw = result.headers?.["Cache-Control"] || result.headers?.["cache-control"];
+    const cacheControl = Array.isArray(cacheControlRaw) ? cacheControlRaw[0] : cacheControlRaw || "public,max-age=31536000,immutable";
+    await blobClient.upload(buffer, buffer.length, {
+      blobHTTPHeaders: {
+        blobContentType: contentType,
+        blobCacheControl: cacheControl
+      }
+    });
+  } catch (error) {
+    console.error("Failed to cache optimized image:", error);
+  }
+}
+function createCachedImageOptimizationHandler(defaultHandler) {
+  return async (event, options) => {
+    const cacheKey = computeCacheKey(event);
+    const cached = await getCachedImage(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const result = await defaultHandler(event, options);
+    if (result.statusCode === 200 && result.body) {
+      const chunks = [];
+      for await (const chunk of result.body) {
+        chunks.push(Buffer.from(chunk));
+      }
+      const buffer = Buffer.concat(chunks);
+      const resultWithBuffer = {
+        ...result,
+        body: new ReadableStream({
+          start(controller) {
+            controller.enqueue(buffer);
+            controller.close();
+          }
+        })
+      };
+      await setCachedImage(cacheKey, resultWithBuffer);
+      return resultWithBuffer;
+    }
+    return result;
+  };
+}
+
+export { createCachedImageOptimizationHandler };

package/dist/shared/{opennextjs-azure.d619537c.d.mts → opennextjs-azure.279bd73d.d.mts}

@@ -1,5 +1,5 @@
 import { RoutePreloadingBehavior, OpenNextConfig } from '@opennextjs/aws/types/open-next.js';
-import { IncrementalCache, TagCache, Queue } from '@opennextjs/aws/types/overrides.js';
+import { IncrementalCache, TagCache, Queue, ImageLoader } from '@opennextjs/aws/types/overrides.js';
 
 type AzureDeploymentTarget = "functions" | "static-web-apps" | "container-apps";
 interface AzureDeploymentConfig {
@@ -19,6 +19,8 @@ interface AzureConfig {
     incrementalCache?: "azure-blob" | IncrementalCache;
     tagCache?: "azure-table" | TagCache;
     queue?: "azure-queue" | Queue;
+    imageLoader?: "azure-blob" | ImageLoader | (() => Promise<ImageLoader>);
+    enableImageOptimizationCache?: boolean;
     routePreloadingBehavior?: RoutePreloadingBehavior;
     middleware?: OpenNextConfig["middleware"];
     dangerous?: OpenNextConfig["dangerous"];

package/dist/shared/{opennextjs-azure.d619537c.d.ts → opennextjs-azure.279bd73d.d.ts}

@@ -1,5 +1,5 @@
 import { RoutePreloadingBehavior, OpenNextConfig } from '@opennextjs/aws/types/open-next.js';
-import { IncrementalCache, TagCache, Queue } from '@opennextjs/aws/types/overrides.js';
+import { IncrementalCache, TagCache, Queue, ImageLoader } from '@opennextjs/aws/types/overrides.js';
 
 type AzureDeploymentTarget = "functions" | "static-web-apps" | "container-apps";
 interface AzureDeploymentConfig {
@@ -19,6 +19,8 @@ interface AzureConfig {
     incrementalCache?: "azure-blob" | IncrementalCache;
     tagCache?: "azure-table" | TagCache;
     queue?: "azure-queue" | Queue;
+    imageLoader?: "azure-blob" | ImageLoader | (() => Promise<ImageLoader>);
+    enableImageOptimizationCache?: boolean;
     routePreloadingBehavior?: RoutePreloadingBehavior;
     middleware?: OpenNextConfig["middleware"];
     dangerous?: OpenNextConfig["dangerous"];

package/infrastructure/main.bicep

@@ -96,6 +96,14 @@ resource storageAccount 'Microsoft.Storage/storageAccounts@2023-01-01' = {
         publicAccess: 'Blob'
       }
     }
+
+    // Container for optimized images (public CDN access)
+    resource optimizedImagesContainer 'containers' = {
+      name: 'optimized-images'
+      properties: {
+        publicAccess: 'Blob'
+      }
+    }
   }
 
   // Table service for tag cache
@@ -194,6 +202,10 @@ resource functionApp 'Microsoft.Web/sites@2023-01-01' = {
           name: 'AZURE_QUEUE_NAME'
           value: queueName
         }
+        {
+          name: 'AZURE_IMAGE_OPTIMIZATION_CACHE'
+          value: 'true'
+        }
         {
           name: 'NODE_ENV'
           value: 'production'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "opennextjs-azure",
-    "version": "0.1.2",
-    "description": "Azure adapter for Next.js applications using OpenNext",
+    "version": "0.1.3",
+    "description": "True serverless Next.js on Azure Functions with a Vercel-grade developer experience",
     "type": "module",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
@@ -69,7 +69,6 @@
     "bugs": {
         "url": "https://github.com/zpg6/opennextjs-azure/issues"
     },
-    "homepage": "https://opennext.js.org/azure",
     "dependencies": {
         "@opennextjs/aws": "^3.8.5",
         "@azure/functions": "^4.5.1",