From daaa1b9effba479697916462f58cce2e42ee74d8 Mon Sep 17 00:00:00 2001
From: Khue Nguyen <khuezy.nguyen@gmail.com>
Date: Mon, 5 Dec 2022 15:46:38 -0800
Subject: [PATCH] docs: update readme with image opt

---
 README.md     | 41 +++++++++++++++++++++++++++++++++++++++++
 src/Nextjs.ts |  2 +-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d962332b..31dfb43b 100644
--- a/README.md
+++ b/README.md
@@ -16,9 +16,50 @@ import { Nextjs } from 'cdk-nextjs-standalone';
 
 new Nextjs(this, 'Web', {
   nextjsPath: './web', // relative path to nextjs project root
+
+  // Bucket that contains your app's images for optimizations.
+  // If not provided, internal assets bucket will be used.
+  imageOptimizationBucket: myImageBucket,
 });
 ```
 
+### Image Optimization
+
+All requests to `"/_next/image?url=..." ` will be routed to a separate image optimization lambda. To take advantage of this feature, use the `<Image />` component as:
+
+```ts
+// MyPage.tsx
+import Image from 'next/image'
+
+function MyPage() {
+   return (
+      <>
+         <Image src="/path/to/image/in/bucket/hello.png" alt={...} width={...} />
+         <Image src="https://images.unsplash.com/photo-1600804340584-c7db2eacf0bf" alt={...} width={...} />
+      </>
+   )
+}
+```
+
+Note: the `<Image />` component handles the URL encoding and prefixes the `src` with `"/_next/image?url=..."`
+
+If you need to optimize external images, configure `next.config.js`:
+(Please see [doc](https://nextjs.org/docs/api-reference/next/image#remote-patterns) on domain patterns.)
+
+```ts
+// next.config.js
+const nextConfig = {
+  ...
+  images: {
+    remotePatterns: [
+     {
+       hostname: "**.unsplash.com",
+     },
+    ],
+  },
+};
+```
+
 ## Documentation
 
 Available on [Construct Hub](https://constructs.dev/packages/cdk-nextjs-standalone/).
diff --git a/src/Nextjs.ts b/src/Nextjs.ts
index facf5637..277a57e5 100644
--- a/src/Nextjs.ts
+++ b/src/Nextjs.ts
@@ -103,7 +103,7 @@ export class Nextjs extends Construct {
   public lambdaFunctionUrl!: lambda.FunctionUrl;
   public imageOptimizationLambdaFunctionUrl!: lambda.FunctionUrl;
 
-  protected staticAssetBucket: s3.Bucket;
+  protected staticAssetBucket: s3.IBucket;
 
   constructor(scope: Construct, id: string, props: NextjsProps) {
     super(scope, id);