Last summer we had the idea to publish our Next.js site serverless on Amazon Web Services (AWS). Because we live in Germany and Vercel only supports a few of AWS regions for deploying your site in Europe (closest to Germany is Brussel/Belgium) we began a search how we could deploy our website to the AWS Frankfurt region.
► We didn’t want to rely on a cloud service (Serverless Components or Vercel) for deploying our application
► Deploying our app should require nearly zero-config and support all major Next.js features
With the introduction of Next.js 10 the new
next/image component was added. It is a modern approach to enhance the
<img> HTML-Element by adjusting the image based on the viewer’s needs. By recognizing what image extensions (e.g. newer formats like WebP) the client browser supports, it converts the source accordingly and also resizes the image optimized for the screen width of the viewer.
The optimization itself is performed on the fly when the resource is requested by the user. This makes the solution perfectly scalable whether it is used for 10 or 10 million images.
But what if you self-host…