Terraform Next.js Image Optimization module for AWS

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

Notice: If you look for a complete solution to host a Next.js application with Terraform on AWS, please check out our Terraform Next.js module for AWS.

Features

• ✅  Terraform v0.13+
• ✅  Serverless image processing powered by AWS Lambda
• ✅  Powerful optimization using the sharp processing library
• ✅  Performant image caching powered by Amazon CloudFront
• ✅  Two-layer caching with CloudFront Origin Shield
• ✅  Support for custom Device Sizes & Image Sizes

Architecture

The image optimization module is designed as a full stack AWS app. It relies on multiple AWS services and connects them to work as a single application:

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 = "~> 4.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 = "milliHQ/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'
+  },
}

Then rebuild and redeploy your Next.js application to make use of the changed configuration.

Examples

• Statically exported Next.js app hosted on S3
  Use the image optimizer together with a statically exported Next.js app that is deployed to S3 and CloudFront.
• Next.js + Vercel
  Use the image optimizer together with a Next.js app deployed on Vercel.
• Existing CloudFront
  Use the image optimizer with an existing CloudFront distribution.

Requirements

Providers

Inputs

[
  "image/webp"
]

Outputs

Limits

• Max file size of a resized image is 6mb (#110)
  Resized images returned by the image optimization API cannot exceed 6mb in size, because this is the maximum allowed payload size for AWS Lambda.

Versioning

The module internally relies on the original Next.js image optimizer. So the versioning of the module is aligned with the version of the corresponding Next.js release.

For example the v10.0.5 version of this Terraform module uses the image optimizer from the Next.js 10.0.5 release.

Please note that we only publish versions >=10.0.5, for a full list of available versions see the published versions in the Terraform Registry.

Contributing

Contributions are welcome!
If you want to improve this module, please take a look at our contributing guide.

About

This project is maintained by milliVolt infrastructure.
We build custom infrastructure solutions for any cloud provider.

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.