You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Use the image optimizer with an existing CloudFront distribution.
@@ -140,7 +140,7 @@ Then rebuild and redeploy your Next.js application to make use of the changed co
140
140
| next\_image\_domains | Allowed origin domains that can be used for fetching images. |`list(string)`|`[]`| no |
141
141
| next\_image\_formats | If the Accept head matches more than one of the configured formats, the first match in the array is used. Therefore, the array order matters. If there is no match, the Image Optimization API will fallback to the original image's format. |`list(string)`| <pre>[<br> "image/webp"<br>]</pre> | no |
142
142
| next\_image\_image\_sizes | Allowed image sizes that should be used for image optimization. |`list(number)`|`null`| no |
143
-
| next\_image\_version | Next.js version from where you want to use the image optimizer from. Supports semver ranges. |`string`|`"12.0.1"`| no |
143
+
| next\_image\_version | Next.js version from where you want to use the image optimizer from. Supports semver ranges. |`string`|`"12.0.2"`| no |
144
144
| 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 |
145
145
| tags | Tag metadata to label AWS resources that support tags. |`map(string)`|`{}`| no |
In the Next.js project, open the `next.config.js` file and add the following lines (Remember to replace `<distribution-id>` with the output from the previous step):
To create a static build of Next.js we need to run two commands.
75
65
`next build` builds the production site in the `.next/` folder.
76
66
[`next export`](https://nextjs.org/docs/advanced-features/static-html-export) then creates a static HTML export from your site that can be deployed to a static file hosting service like AWS S3.
77
67
78
68
```sh
79
69
npm run build # Builds the Next.js site
80
-
npm run export# Prepares the
70
+
npm run export# Prepares the build output for upload to S3
81
71
```
82
72
83
73
After running the two commands you should see a new folder named `out/` in your project, where the statically exported site is exported to.
84
74
85
-
### 5. Upload the Next.js site to S3
75
+
### 4. Upload the Next.js site to S3
86
76
87
77
To upload the content of the `out/` folder we use the [AWS CLI](https://aws.amazon.com/cli/).
88
78
Make sure to replace `<bucket-name>` with the output from step 2 before running the command:
0 commit comments