[| 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` | `"12.0.0"` | no | +| next\_image\_version | Next.js version from where you want to use the image optimizer from. Supports semver ranges. | `string` | `"12.0.1"` | 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 | diff --git a/docs/assets/architecture.png b/docs/assets/architecture.png index 22765af..64228f7 100644 Binary files a/docs/assets/architecture.png and b/docs/assets/architecture.png differ diff --git a/examples/with-next-js-export/.gitignore b/examples/with-next-js-export/.gitignore new file mode 100644 index 0000000..1437c53 --- /dev/null +++ b/examples/with-next-js-export/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/with-next-js-export/LICENSE b/examples/with-next-js-export/LICENSE new file mode 100644 index 0000000..a32647f --- /dev/null +++ b/examples/with-next-js-export/LICENSE @@ -0,0 +1,10 @@ +The MIT License (MIT) + +Copyright (c) 2021 Felix Haus (milliVolt infrastructure) +Copyright (c) 2021 Vercel, Inc. + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/examples/with-next-js-export/README.md b/examples/with-next-js-export/README.md new file mode 100644 index 0000000..a9891a1 --- /dev/null +++ b/examples/with-next-js-export/README.md @@ -0,0 +1,105 @@ +# Next.js export and S3 example + +This example shows how to use the image optimizer together with a statically exported Next.js HTML site that is hosted on AWS S3. + +> **Note:** The full example code is available on [GitHub](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-next-js-export) + +## Features + +- ✅ [Statically exported Next.js](https://nextjs.org/docs/advanced-features/static-html-export) HTML site using `next export` +- ✅ Site hosted on [AWS S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html) +- ✅ Optimized caching with Amazon CloudFront +- ✅ [Serverless image optimization](https://github.com/milliHQ/terraform-aws-next-js-image-optimization) using CloudFront and AWS Lambda + +## Setup guide + +This guide walks you through the necessary steps to deploy the example to your own AWS account. + +### 0. Prerequisites + +The following software is required to follow this guide: + +- [Node.js 14+](https://nodejs.org/) +- [Terraform 1.0+](https://www.terraform.io/downloads) +- [AWS CLI](https://aws.amazon.com/cli/) + +### 1. Initialize project + +Download the files from the example app and initialize it in a new folder: + +```sh +npx create-next-app -e https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-next-js-export my-app +cd my-app +``` + +### 2. Create the required resources in your AWS account + +We use Terraform to create all the resources (S3 bucket, CloudFront distribution, image optimizer, etc.) in your AWS account. +For simplicity we use [AWS Access Keys](https://docs.aws.amazon.com/powershell/latest/userguide/pstools-appendix-sign-up.html) for authentication, other authentication methods are [also available](https://registry.terraform.io/providers/hashicorp/aws/latest/docs#authentication). + +```sh +# Expose your AWS Access Keys to the current terminal session +export AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE +export AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY + +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: + +```sh +> Apply complete! +> +> Outputs: +> +> domain = "
"image/webp"
]
+ Image Component
+
+ as a Background
+
+ This page demonstrates the usage of the{' '} + + next/image + {' '} + component with live examples. +
++ This component is designed to{' '} + + automatically optimize + {' '} + images on-demand as the browser requests them. +
+
+ The layout property tells the image to respond differently
+ depending on the device size or the container size.
+
+ Select a layout below and try resizing the window or rotating your + device to see how the image reacts. +
+
+ The placeholder property tells the image what to do while
+ loading.
+
+ You can optionally enable a blur-up placeholder while the high + resolution image loads. +
++ Try it out below (you may need to disable cache in dev tools to see the + effect if you already visited): +
+
+ The following is an example of a reference to an internal image from the{' '}
+ public directory.
+
+ This image is intentionally large so you have to scroll down to the next + image. +
+
+ The following is an example of a reference to an external image at{' '}
+ assets.vercel.com.
+
+ External domains must be configured in next.config.js using
+ the domains property.
+
+ You can optionally configure a cloud provider, device sizes, and more! +
++ Checkout the{' '} + + Image Optimization documentation + {' '} + to learn more. +
+This component is designed to{' '} - automatically optimizate + automatically optimize {' '} images on-demand as the browser requests them.
@@ -62,16 +63,47 @@ const Index = () => (
+ The placeholder property tells the image what to do while
+ loading.
+
+ You can optionally enable a blur-up placeholder while the high + resolution image loads. +
++ Try it out below (you may need to disable cache in dev tools to see the + effect if you already visited): +
+
- The following is an example of a reference to an interal image from the{' '}
+ The following is an example of a reference to an internal image from the{' '}
public directory.
This image is intentionally large so you have to scroll down to the next image.
-diff --git a/examples/with-next-js/pages/layout-fill.js b/examples/with-next-js/pages/layout-fill.js index 51a7344..1148208 100644 --- a/examples/with-next-js/pages/layout-fill.js +++ b/examples/with-next-js/pages/layout-fill.js @@ -1,22 +1,18 @@ import Image from 'next/image'; import ViewSource from '../components/view-source'; +import mountains from '../public/mountains.jpg'; const Fill = () => (