docs: update readme with image opt

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/).

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);