DEV Community

Cover image for Streamlining Next.js Deployment with AWS Amplify: Features and Budget Considerations
Nir Tzezana
Nir Tzezana

Posted on

Streamlining Next.js Deployment with AWS Amplify: Features and Budget Considerations

Ever wanted to work with NextJS but failed to find a good place to deploy your apps to?
Well, as it turns out, Amazon AWS has the answer for you, AWS Amplify.

But first things first - Let's create our brand new NextJS app.
Open a terminal and type

npx create-next-app@latest amplify-nextjs-app
cd amplify-nextjs-app
Enter fullscreen mode Exit fullscreen mode

This will create an amplify-nextjs-app folder and will get us into that folder.

Now we'll go to Github and create a new private project, and we'll attach our current NextJS project to the Github repo.

creating the github repo

Let's attach the repo to our project

git remote add origin 
https://github.com/[your username]/amplify-nextjs-app.git
git branch -M main
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

The hard part is behind us, now we can move on to deploying the app.

Setting up Amplify is pretty straightforward, go into AWS console and look for Amplify.

settings

In Amplify, click on "Deploy an app" and then select "Github"

deploy

After connecting Amplify to GitHub, you’ll gain access to a list of all your repositories. Locate and select the newly created amplify-nextjs-app repository. Amplify is designed to automatically detect the framework your app is built on, and in this case, it should identify your project as a Next.js application.

Once the setup is recognized, simply click "Next" to confirm the configuration. Then, proceed by clicking "Save and Deploy" to start the deployment process. Amplify will initiate the build, provision resources, and deploy your application. This process typically takes just a few moments, and once complete, your app will be live and accessible via a generated URL.

You can now visit the provided URL to see your Next.js app up and running on AWS Amplify!

url

That was easy!

Adding a Custom Domain to Your Amplify App

One of the great features of AWS Amplify is the ability to connect your deployed app to a custom domain, giving it a professional and branded URL. To set up a custom domain, go to the Amplify console, select your app, and navigate to the "Domain management" section. From there, you can add your domain by specifying your domain provider (like Route 53, GoDaddy, or Namecheap) and following the guided steps to configure DNS settings. Amplify even provides HTTPS certificates through AWS Certificate Manager, ensuring secure communication for your users. With just a few clicks, your app will be accessible through a custom URL that aligns with your brand.

Now let's talk costs:

Amplify charges you for 3 things:

  • Build and deploy time
  • Storage
  • Bandwidth

Suppose your app builds every day (30 times a month), weighs about 10MB and has a traffic of 5000 users a month.

Build & Deploy Cost

  • Build time: 2 minutes per build.
  • Number of builds: 30 builds per month.
  • Cost per minute: $0.01.

Storage Cost

  • App size: 10 MB = 0.01 GB.
  • Storage pricing: $0.023 per GB per month.

Bandwidth Cost

  • App size: 10 MB = 0.01 GB.
  • Users: 5,000 per month.
  • Data transferred: Each user downloads the app (assuming one download per user).
  • Total bandwidth: 5000 * 0.01GB = 50GB.
  • Bandwidth pricing: $0.15 per GB.

Total: $0.60 (Build and Deploy) + $0.01 (Storage) + $7.50 (Bandwidth)

This totals for:

$8.11 / month

This equates and even wins other hosting services and may benefit you if you're using more services from AWS.

Top comments (3)

Collapse
 
alex_galinsky_1281d516c10 profile image
Alex Galinsky

Very interesting!

Collapse
 
ravid profile image
Ravid Pollak

Awesome write-up, Nir! 🙌 Love how you broke down the process step by step

Collapse
 
rony_sason_adce16b4d1459b profile image
Rony Sason

Great Article Nir!