It costs $10 to host a Next.js app on AWS

From personal experience, having a personal site is another way to stand out in a tech job market with decreasing entry-level roles and a trend in layoffs. The recruiters who read your resume will click on the links in your resume, and while having a GitHub profile is nice, a fully deployed website can make a big difference. And if it doesn't provide a good experience, they won't be impressed.

This article walks through a design for a Next.js web app that leverages server-side rendering at a cost that (hopefully) computer science majors can afford.

Before we start

If your goal is to simply show a portfolio and maybe a handful of blogs/articles, then you should consider using S3 to host your site with CloudFront in front, and Next.js static exports (or a plethora of other tools) for static site generation.

Seriously, hosting a Next.js server is expensive, and a static approach can get you close to $0/month.

However, if you plan to have hundreds or even thousands of blogs, perhaps not all authored by you, you will have to wait for the next build to complete to see new blogs, and you will have to generate and sync all those pages to S3 for every build. If you foresee a similar issue with your application, or if you just want to overengineer it for fun, please continue reading!

Requirements Analysis

It's typically a good idea to start by creating estimates based on your application's requirements. This shifts your mindset into thinking about access patterns, authentication, and costs.

Requirements for a personal blog site

• Users can read blogs. 1-2 blogs read per user per day.
• Users can list through blogs. Blogs should be listed and paginated through 10 at a time.
• Users can like blogs. 5% of users per blog.
• Authors can create blogs. 1 blog created per author per day.
• Users can post comments on blogs. 3-5 comment per blog.
• Users can read comments on blogs. 10 comments read per user per blog per day.
• Users can like comments. 1 comment liked per user per blog per day.

A neat guide on how to gather requirements by Arjay the dev

Estimations

Now that we have our requirements, we can make some estimations on operational load and help us identify operations that we should optimize. Assuming 1,000 daily users (i wish!):

Requests per second (Reads)

  2 blog reads x 1,000 users
+ 10 blogs listed x 1,000 users
+ 10 comments read x 2 blog reads x 1,000 users
= 32,000 reads per day / 86,400
= 0.37 reads per second

Writes per second (Reads)

  5% users liked blogs x 1,000 users
+ 5 comments posted
+ 1 comment liked x 1,000 users
= 1055 writes per day / 86,400
= 0.012 writes per second

Design

Any SQL server can meet these requirements. PostgreSQL has a limit of 1 GB per text field (~166,000,000 words), can easily store and query through hundreds of thousands of rows, and can handle thousands of writes per day even if unevenly distributed. We can move on straight to design.

Tech Stack

For this design, we'll containerize our Next.js server and host it on ECS. While containerization is not necessary, it helps us avoid manually configuring virtual private servers and makes CICD much easier with GitHub actions. We can take our docker images and run on them on EC2 or any other VPS at any time 😉

Blog content will contain images as well, so it makes sense to create an S3 bucket for this.

Overall, our design is looking like this:

Our total cost ends up being $45/month! ALB ends up being the most expensive at $22/month, even if we just need to scale down to one container, and RDS smallest instance type is t4g.micro, costing us $15/month.

You may have noticed we are not using a Content Management System (CMS) here as this is just a personal blog, but if we extended the requirements, we can allow users to create their own blogs through Directus Visual Editor. This would require an additional container at $7/month.

Optimizing for Cost

We need a more affordable solution without sacrificing reliability or performance.

Switch from RDS to DynamoDB

First, let's get rid RDS and instead use DynamoDB, which will bring our database costs down to ~$2/month. It will be harder to query data efficiently, but it's worth the cost savings.

Switch from ALB + ECS to Lightsail Container Service

Instead of ALB + ECS, we will use Lightsail Container Service, whose smallest capacity is $7/month ($3.50 for the VPS alternative, but again, more configuration needed).

Our new design looks like this:

For $10/month, we get a highly available, affordable, low-latency Next.js app.

We are missing auto-scaling capabilities that ECS would provide, but Lightsail's bundled load balancer and lower data transfer costs more than make up for the cost of not being able to scale down automatically.

From the Author

Thanks for taking a few minutes to read my blog. This same application is using the above design as its infrastructure. Let's see how well it holds up!

My main motive for creating this blog is to share cool ideas with others in computer science topics. No cookies, no paywall, no signing up, just free content to consume at no one's expense.