Pass image settings to the optimization module (#299)

Author: ofhouse

main.tf

@@ -158,9 +158,12 @@ module "next_image" {
   # device) sizes to the optimizer and by setting the other
   # (next_image_device_sizes) to an empty array which prevents the optimizer
   # from adding the default device settings
-  next_image_domains      = lookup(local.config_file_images, "domains", [])
-  next_image_image_sizes  = lookup(local.config_file_images, "sizes", [])
-  next_image_device_sizes = []
+  next_image_domains                 = lookup(local.config_file_images, "domains", [])
+  next_image_image_sizes             = lookup(local.config_file_images, "sizes", [])
+  next_image_device_sizes            = []
+  next_image_formats                 = lookup(local.config_file_images, "formats", null)
+  next_image_dangerously_allow_SVG   = lookup(local.config_file_images, "dangerouslyAllowSVG", false)
+  next_image_content_security_policy = lookup(local.config_file_images, "contentSecurityPolicy", null)
 
   source_bucket_id = module.statics_deploy.static_bucket_id
 

packages/runtime/src/index.ts

@@ -223,7 +223,13 @@ export async function build({
   meta = {} as BuildParamsMeta,
 }: BuildParamsType): Promise<{
   routes: Route[];
-  images?: { domains: string[]; sizes: number[] };
+  images?: {
+    domains: string[];
+    sizes: number[];
+    formats?: string[] | undefined;
+    dangerouslyAllowSVG?: boolean | undefined;
+    contentSecurityPolicy?: string | undefined;
+  };
   output: Files;
   wildcard?: Array<{
     domain: string;
@@ -660,11 +666,31 @@ export async function build({
         }
         if (!Array.isArray(images.sizes)) {
           throw new NowBuildError({
-            code: 'NEXT_IMAGES_DOMAINS',
+            code: 'NEXT_IMAGES_SIZES',
             message:
               'image-manifest.json "images.sizes" must be an array. Contact support if this continues to happen.',
           });
         }
+        if (
+          typeof images.dangerouslyAllowSVG !== 'undefined' &&
+          typeof images.dangerouslyAllowSVG !== 'boolean'
+        ) {
+          throw new NowBuildError({
+            code: 'NEXT_IMAGES_DANGEROUSLYALLOWSVG',
+            message:
+              'image-manifest.json "images.dangerouslyAllowSVG" must be an boolean. Contact support if this continues to happen.',
+          });
+        }
+        if (
+          typeof images.contentSecurityPolicy !== 'undefined' &&
+          typeof images.contentSecurityPolicy !== 'string'
+        ) {
+          throw new NowBuildError({
+            code: 'NEXT_IMAGES_CONTENTSECURITYPOLICY',
+            message:
+              'image-manifest.json "images.contentSecurityPolicy" must be an string. Contact support if this continues to happen.',
+          });
+        }
         break;
       }
       default: {
@@ -2129,6 +2155,9 @@ export async function build({
         ? {
             domains: imagesManifest.images.domains,
             sizes: imagesManifest.images.sizes,
+            formats: imagesManifest.images.formats,
+            dangerouslyAllowSVG: imagesManifest.images.dangerouslyAllowSVG,
+            contentSecurityPolicy: imagesManifest.images.contentSecurityPolicy,
           }
         : undefined,
     /*

packages/runtime/src/utils.ts

@@ -522,6 +522,10 @@ type ImagesManifest = {
     loader: LoaderKey;
     sizes: number[];
     domains: string[];
+    formats?: string[] | undefined;
+    minimumCacheTTL?: number | undefined;
+    dangerouslyAllowSVG?: boolean | undefined;
+    contentSecurityPolicy?: string | undefined;
   };
 };
 

packages/tf-next/src/commands/build.ts

@@ -50,6 +50,9 @@ interface OutputProps {
   images?: {
     domains: string[];
     sizes: number[];
+    formats?: string[] | undefined;
+    dangerouslyAllowSVG?: boolean | undefined;
+    contentSecurityPolicy?: string | undefined;
   };
   routes: Route[];
   lambdas: Lambdas;