9

I want to deploy NextJS on AWS using AWS CDK for a POC and was looking at options. In the NextJS docs, it says that we can just create an instance and run npm run build && npm start, it will start the service for us. However, this is not the most optimised way of deploying.

Vercel deploys this in the most optimized way possible: enter image description here

How can I do the same with AWS? How can I serve the static assets and pages via Cloudfront CDN and the server side rendered pages and APIs via either Lambda or ECS? Is there a step by step guide that I can follow to split out the build files for the same?

Other options I explored

  • AWS Amplify: As it is a premium service, I feel doing all this by my self would be a lot cheaper and gives me more flexibility in CDK (I am not sure how Amplify works behind the scenes to deploy the nextjs assets on a S3 + Cloudfront + Lambda stack)
  • serverless framework: There is a plugin to deploy nextjs. But, I want to have full control over the deployment and don't want to depend on any external framework. Want to do it natively using AWS CDK.

Any pointers to do this natively using AWS CDK would be helpful. Thanks.

vighnesh153
  • 4,354
  • 2
  • 13
  • 27
  • I have been deploying my Next.js app on AWS amplify and it's been doing good. Build/deploy time is a bit longer than Vercel and I feel like the logging on Amplify lacks a bit when compared to Vercel, but I found it to be an easy to use and good alternative – Gustavo Farias Jan 24 '22 at 12:33
  • Yep. Amplify is easy. But, it is expensive. Also, we have to wait for Amplify to support newer versions of NextJS (Currently, it supports 10.x I think). So, I want to do all the things that Amplify does, myself through AWS Cloudformation or CDK without using the AWS Amplify CDK construct. – vighnesh153 Jan 24 '22 at 13:00
  • I couldn't say how it performs with Next 12, I am using the latest version of Next, but not making use of many of the new functionalities, new compiler for one. But I am trying to make a case on changing to Vercel, it's just so good to deploy Next app on it – Gustavo Farias Jan 24 '22 at 13:37
  • 1
    Be careful with amplify, like other "canned" AWS services (e.g. Beanstalk) you can't configure/customize a lot of areas required of professional projects. For example, last I used it, you have limited routing + rewriting options and they don't support query strings. Outside of very basic blog / static site use-cases I would not recommend it. – firxworx Mar 26 '22 at 19:03

1 Answers1

13

Deploying Next.js as a serverless application requires a bunch of services when you don't want to pack the whole Next.js server into a single Lambda.

My current setup of AWS services to achieve this looks like the following: enter image description here

It consists of 3 main resources:

  1. CloudFront
    This works as a serverless reverse proxy that routes the traffic from the Internet to S3 (JavaScript, prerendered pages) or Lambda (Server rendered pages).
    When using the image optimization capabilities of Next.js you also need an extra service that provides the API for it.
  2. S3
    Since you don't want to invoke Lambdas just to serve static content, you need a S3 bucket where those files are stored and served from.
  3. Lambda
    The Lambdas are then used to serve the server generated pages (SSR & API). They contain a minimal version of the Next.js server (e.g. without the static files that are served from S3).

I built this setup with Terraform, so there is no native CDK solution available at this time. But most of it could be simply translated to CDK since the model behind Terraform and CDK is pretty much the same.

Source code of the Terraform module is available on GitHub: https://github.com/milliHQ/terraform-aws-next-js

ofhouse
  • 3,047
  • 1
  • 36
  • 42
  • This is really great. Thanks for the detailed diagram. I am just worried that if NextJS updates their API with a breaking change, a lot of things might change here and there is no official architecture documented by NextJS, hence, we ourselves will have to figure out the different services used behind the scenes. – vighnesh153 Nov 12 '22 at 04:43
  • Ahh, Thanks for your diagram and could you tell me what software or template do you use for this diagram, this looks very nice and clear. – Lxxyx Nov 27 '22 at 03:51
  • @Lxxyx I believe it's figma, so not something you can just copy+paste – Berkeli Mar 25 '23 at 14:06