Terraform Next.js Image Optimization module for AWS

A drop-in image optimization loader for the Next.js image component next/image.

If you need a complete hosting solution for Next.js with Terraform, please check out our Terraform Next.js module for AWS.

Features

• ✅  Terraform v0.13+
• ✅  Serverless image processing powered by AWS Lambda
• ✅  Amazon CloudFront powered image caching
• ✅  Support for custom Device Sizes & Image Sizes

Usage

1. Deploy the module to AWS

Initialize the module by creating a main.tf file with the following content (you can place the file in the same directory where your Next.js project is located):

# main.tf

terraform {
  required_providers {
    aws = {
      source  = "hashicorp/aws"
      version = "~> 3.0"
    }
  }
}

# Main AWS region where the resources should be created in
# Should be close to where your Next.js deployment is located
provider "aws" {
  region = "us-east-1"
}

module "next_image_optimizer" {
  source = "dealmore/next-js-image-optimization/aws"

  next_image_domains = ["example.com", "sub.example.com"]
}

output "domain" {
  value = module.next_image_optimizer.cloudfront_domain_name
}

Then run Terraform to deploy the image optimiziation module to your AWS account:

terraform init  # Only needed on the first time running Terraform

terraform plan  # (Optional) See what resources Terraform will create
terraform apply # Deploy the image optimizer module to your AWS account

After Terraform has successfully created all resources in your AWS account, you should see the following output on the terminal:

> Apply complete!
>
> Outputs:
>
> domain = "<distribution-id>.cloudfront.net"

You should save the <distribution-id>.cloudfront.net output somewhere since you need it in the next step.

2. Adjust Next.js config

In your Next.js project, open or create the next.config.js file and add the following lines (Remember to replace <distribution-id> with the output from the previous step):

// next.config.js

module.exports = {
+  images: {
+    path: 'https://<distribution-id>.cloudfront.net/_next/image'
+  },
}

Examples

• Next.js + Vercel - Use the image optimizer together with a Next.js app deployed on Vercel.
• Existing CloudFront - Embedd the image optimizer in an existing CloudFront distribution.

Requirements

Name	Version
terraform	>= 0.13
aws	>= 3.28.0
random	>= 2.3.0

Providers

Name	Version
aws	>= 3.28.0
random	>= 2.3.0

Inputs

Name	Description	Type	Default	Required
cloudfront_create_distribution	Controls whether a CloudFront distribution should be created.	bool	true	no
cloudfront_origin_id	Override the id for the custom CloudFront id.	string	"tf-next-image-optimizer"	no
cloudfront_price_class	Price class for the CloudFront distributions (main & proxy config). One of PriceClass_All, PriceClass_200, PriceClass_100.	string	"PriceClass_100"	no
debug_use_local_packages	(Debug) Use local packages instead of downloading them from npm.	bool	false	no
deployment_name	Identifier for the deployment group (alphanumeric characters, underscores, hyphens, slashes, hash signs and dots are allowed).	string	"tf-next-image"	no
lambda_attach_policy_json	Controls whether lambda_policy_json should be added to IAM role for Lambda function.	bool	false	no
lambda_memory_size	Amount of memory in MB the worker Lambda Function can use. Valid value between 128 MB to 10,240 MB, in 1 MB increments.	number	1024	no
lambda_policy_json	Additional policy document as JSON to attach to the Lambda Function role.	string	""	no
lambda_role_permissions_boundary	ARN of IAM policy that scopes aws_iam_role access for the lambda.	string	null	no
lambda_timeout	Max amount of time the worker Lambda Function has to return a response in seconds. Should not be more than 30 (Limited by API Gateway).	number	30	no
next_image_device_sizes	Allowed device sizes that should be used for image optimization.	list(number)	null	no
next_image_domains	Allowed origin domains that can be used for fetching images.	list(string)	[]	no
next_image_image_sizes	Allowed image sizes that should be used for image optimization.	list(number)	null	no
next_image_version	Next.js version from where you want to use the image optimizer from. Supports semver ranges.	string	"^10.0.5-beta"	no
source_bucket_id	When your static files are deployed to a Bucket (e.g. with Terraform Next.js) the optimizer can pull the source from the bucket rather than over the internet.	string	null	no
tags	Tag metadata to label AWS resources that support tags.	map(string)	{}	no

Outputs

Name	Description
cloudfront_cache_policy_id	Cache policy id used for image optimization.
cloudfront_domain_name	Domain of the internal CloudFront distribution.
cloudfront_hosted_zone_id	Zone id of the internal CloudFront distribution.
cloudfront_origin_id	Id of the custom origin used for image optimization.
cloudfront_origin_image_optimizer	Predefined CloudFront origin of the image optimizer. Can be used to embedd the image optimizer into an existing CloudFront resource.
cloudfront_origin_request_policy_id	Request policy id used for image optimization.

Versioning

We rely on the original Next.js image optimizer, so every version of the internal Lambda component @dealmore/tf-next-image-optimization follows the versioning schema of the official Next.js package.

By default we use the current major version ^10.0.5 of Next.js as base, so each deployment of the Terraform module pulls the latest package from this range.

However if you have problems with a specific version Next.js you can override this setting with a fixed version number or semver range:

# main.tf
module "next_image_optimizer" {
   source = "dealmore/next-js-image-optimization/aws"

   next_image_domains = ["example.com", "sub.example.com"]
+  next_image_version = "10.0.5"
}

Please note that we only publish versions >=10.0.5, for a full list of available versions see this npm page.

License

Apache-2.0 - see LICENSE for details.

Note: All sample projects in examples/* are licensed as MIT to comply with the official Next.js examples.