Skip to content

Latest commit

 

History

History
167 lines (122 loc) · 7.66 KB

README.md

File metadata and controls

167 lines (122 loc) · 7.66 KB
Raw

Terraform Next.js Image Optimization module for AWS

CI

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

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.