Construct for hosting Next.js apps with OpenNext

[rajikaimal]

Problem being solved

Next.js includes features that rely on serverless infrastructure, such as middleware, image optimization, and server-side rendering (SSR). Since Next.js is closely integrated with Vercel's infrastructure, these features are not natively supported elsewhere. As a solution, OpenNext can be used, which leverages AWS Lambda (or any other cloud serverless compute) to deploy Next.js builds.

Proposal

export class WebStack extends Construct {
    constructor(scope: Construct, id: string, props?: StackProps) {
        super(scope, id, props);
      
        const nextjs = new Nextjs(this, 'Nextjs', {
            nextjsPath: './web',
        });
       
        new CfnOutput(this, "CloudFrontDistributionDomain", {
           value: nextjs.distribution.distributionDomain,
        });
    }
}

Snippet taken from: https://github.com/jetbridge/cdk-nextjs
This construct doesn't support OpenNext v3, hence we'd probably have to go for our own implementation instead of re-using it.

[flaviostutz]

Thanks for the well explained proposal!

Have you done already any spike or used OpenNext in production already?

Also I am wondering if people would really use Lambda for SSR, or it would better to invest on AWS Amplify for this.

https://docs.aws.amazon.com/amplify/latest/userguide/deploy-nextjs-app.html

Maybe it depends on the workload because of the pricing model.

What are your thoughts?

[rajikaimal]

We used OpenNext in my last project with Terraform. Amplify is using lambda under the hood for SSR (even Vercel uses Lambda for their SSR, and they use Cloudflare for CDN stuff), in that regard the paradigm is similar to OpenNext.

Amplify doesn't really have the best reputation in the community,

1. Not the best bug support
2. Tooling around is not that great, specially the CLI

OpenNext vs Amplify