• Familiarity with Node + React + Tailwind
• Basic Familiarity with AWS + Own AWS Account

Next.js comes with a built-int loader for image assets. The built-in loader loads images either from remote locations or from the server itself, optimizes image size and file formate dynamically, and store the images in the <distDir>/cache/images directory on the server. The optimized image file will be served for subsequent requests until the expiration is reached.

Next.js also has the option to provide custom loader functions. This is useful if you're using a CDN service such as https://cloudinary.com/ that already optimizes the images on your behalf and allows retrieval of those images at different sizes.

In our case, we're building a CDN ourselves, using:

• An s3 bucket to store both raw and optimized images
• A lambda function that automatically re-sizes when they get uploaded
• A CloudFront distribution to handle caching of images
• A lightweight server API to invalidate selected caches

We can simply

0. System Requirements

• Node >= 18.17

1. Create next app (I recommend to not use the App router)

npx create-next-app@latest

2. Create a build package, using OpenNext

• OpenNext Docs: https://open-next.js.org/advanced/architecture
• Example Severless Template: opennextjs/opennextjs-aws#32 (comment)