Published on

Why I chose Next.JS and AWS to host my personal website

4 min read
Nextjs and AWS

Recently, I set a goal to create my own personal website, and after considering various technologies, I chose to build it using Next.js and TailwindCSS. I envisioned a space where I could showcase my work and share my insights through a blog. This site is a personal outlet for my thoughts and a showcase of my work. Please note that the content here reflects my personal interpretations and may be presented from my unique perspective.

Why Next.js?

For context, last year I took on the challenge of building a data room at work. At that time, I barely knew anything about React, and the idea of handling logins felt pretty overwhelming on such a short deadline. But I managed to get through it by diving into AWS Amplify CLI's Authentication component, which really helped simplify the whole login process. As for React, a lot of google, youtube, and stackoverflow helped me make things work.

Through this whole process one thing that stuck with me as a newbie me was how complicated React felt. Because it is a highly component-based framework that can support a lot of different application styles. It comes with everything included, and you generally use all of its core features in an application.

By comparison, Vue is much more simple. It was designed this way as a response to "React is too complex". Vue can be just as complex if you start using every feature, but the trick there is you opt in to what you want so it's easier to get started. In some ways that makes learning Vue a great introduction to React, since they have very similar features.

My reasons for choosing Next.js:

  • Performance: It includes automatic code splitting, optimized image loading, and other performance optimizations right out of the box. These features greately enhance the speed and user experience of web applications.
  • API routes: Can create API routes within the same application by simply adding files to the pages/api directory. This feature can simplify the architecture of an application by eliminating the need for a separate backend server for basic cases. While its a feature that's not used in this website, it's good to have under the belt in case it's needed later on.
  • Was just recommended to me: Honestly, I was easily convinced by a co-worker who I've been learning a lot from to use it (Shoutout to Sebastian 😎). Having someone with experience definitely helped put things into perspective and was easier to digest.

Site stats:

Page stats

Hosting in AWS

Since I am hosting purely a static website, I decided to go with what I know and what I have experience with, which is AWS Amplify. If your Next.js application is purely static (i.e., it doesn't use server-side rendering or dynamic generation that requires building on the server for each request), you can deploy it on AWS Amplify as a static site.

AWS Amplify provides a free tier which could potentially cover all costs for small sites, making it free under certain conditions. Here are the key points:

  • AWS Free Tier for Amplify:

    • 1,000 build minutes per month.
    • 5GB stored per month and 15GB served per month.

  • Static Hosting: If your website is fully static and stays within these limits:

    • If you do not exceed 1,000 build minutes per month.
    • If your site does not serve more than 15GB of content per month.
    • If the number of HTTP(S) requests is under 1,000,000 per month.

Under these conditions, hosting your static Next.js frontend could indeed be free of charge. However, if your usage exceeds these limits, the standard AWS Amplify pricing will apply. Always keep track of your usage through the AWS Management Console to manage costs effectively.

Closing

I had been pondering to put this site up for a few months and it only took me 3-4 days to slap my changes and deploy it. Raphaël Chelly's template had just what I wanted to start out this small little digital space. In the coming months I will set out on a journey to make this site more of my own and add components that'll make it a reflection of my personality, even if it's a tiny bit.

Tools used for the creation of the website:

Thanks for reading 😎