React and Next.js rebuild

A few years ago I wrote a blog post on why I chose to write my website in plain HTML and CSS rather than using a framework.

It was the right decision for me at the time as the content of my website was relativity simple and light-weight, and there was not much benefit in a framework.

Since then, however, I have started building more apps which use JavaScript and building my blog out further. This additional content has meant that I now have a need for reusability, consistency, and additional use of JavaScript.

I spent some time reviewing multiple framework options and finally landed on React with Next.js. Next.js is one of the suggested frameworks when building a new app or site with React, and I decided to use it due to its good levels of documentation and relativity simple setup and use.

I was surprised to find that re-building my site in React and Next.js was reasonably straight-forward. I could build components for the parts of my website which required consistency, I could use Tailwind CSS to simplify my CSS and make my website look modern (and pretty), and Typescript for easy coding.

When it came time to build and deploy my app, I was still hosting my previous static website on AWS using S3, and was looking for a new way to deploy my site to make the most of the new features. I started looking at what tools were available in AWS (short of running my own servers) and realised that this was a great use case for trying out AWS Amplify.

Amplify was quite easy to set up and had a built-in deployment pipeline; when I push my code to the git repo, Amplify will automatically build and deploy the latest version. Part of Amplify pricing is a charge for build/deployment minutes, so I need to monitor my usage to ensure I'm not deploying every little change to my website, however the cost is reasonable for a small website such as mine.

The best thing about rebuilding in React with Next.js and hosting using Amplify is how fast my website runs now. As a small static website it never took too long to render in the first place, but the difference is still noticeable. Navigation between pages is almost instantaneous. There is a slight lag in up-front load time now compared to my static website, however this is also typical when accessing a new website for the first time.

All in all, rebuilding my website using a framework was the right choice for my website as I develop more content. I look forward to building more features using these new tools.