In a previous article I shared my pursuit of my Infrastructure as Code to be as “AWS native” as possible. So Amplify, SAM and CDK are my arms of choice.

One tremendous gap, specially for me, was a good way to deploy React apps on AWS in a serverless mode without a lot of overhead. The closest I got was running Fargate. But in Serverless Framework community there was a zero-config constructor called Serverless Next which was great. AWS Amplify hinted we could do SSR soon this solution was the best in the community so far.

The overview of the architecture:

Source: Serverless Next.js Component GitHub repository

So when I heard the community was developing a CDK Constructor which I was thinking in build with help of others…

… I was following closely and interested in the future developments of this release. So the release was published days ago, still labeled as experimental: Serverless Nextjs CDK Construct. Because of my… uh… interest as soon as possible I started testing, I got some problems here and there, asked for help and life found a way.

This live demo, the PokéServerless, is a minimal proof of concept of a NextJS application running on AWS with CloudFront and Lambda@Edge. I just fetch all Pokémons through the PokéAPI then I use a Ditto in pages/[ditto].js to Server Side Generate a page for each one of the Pokémons. Is simple as that.

Picture above: This badass Bug/Steel type, Scizor, was rendered with getServerSideProps

You can find the code behind this example in this repo.

Gotta Fetch’Em All!