Rebuild my website with Next.js, Tailwind CSS and Contentful
Published on • Last updated on
I have been operating my own website for more than 20 years. It all started with a basic html website that listed my dvd collection. In the years after I kept expanding my website with travel stories, photos and blogs. Nowadays I keep it simple with just a couple of blogs.
I recently made the decision to revamp my website. There are several topics that I wanted to accomplish during this rebuild.
- Learn something new
- Website has to load (very) fast
- Content management should be quick and easy
- Reduce maintenance
- Minimize costs
Next.js hosted on Vercel
It didn't take long to end up with Next.js as the (React based) framework for my website. This framework offers all the tools (and documentation) to quickly built web applications, without having to know all the ins- and outs of using React. My experience with React was still quite limited, so this offered me a nice way to learn more.
Another reason to pick Next.js is the service called Vercel. This service (from the creators of Next.js) makes it incredibly easy to deploy your website to production. No need to manage your server(s) and SSL certificates, and no custom pipelines to build and deploy your application. The only thing you need to do is link Vercel with your Git repository and change the DNS for your sites domain. That is it!
And the best thing is, for a small (hobby) website you don't have to pay anything!
I followed this Next.js tutorial to get started. If you haven't used Next.js and/or React before, I can highly recommend following these steps.
Tailwind CSS
The next step was to make the website look decent and make it work on all kinds of devices (mobile, tablets and desktop). I am definitely not a front-end wizard, so the Tailwind CSS framework came in handy. The very extensive documentation and examples made it possible to create a simple but clean design.
I also took the time to implement dark mode, which I personally prefer when reading through content at night.
Manage content with Contentful
The first version of my new website used static Markdown files. This proved too cumbersome since I had to make an adjustment in the source code for every (content) change.
Then Contentful came into the picture, a cloud-based headless CMS. In short, no need to host your own CMS (which saves maintenance and cost). And like Vercel, there are no costs involved in using this service for a small (hobby) website!
After setting up the content model in Contentful it only took me a couple of hours to connect everything together.
Optimize loading times
An important requirement for my website is speed! One way to make a website load fast is to reduce the amount of dynamic content. For example, why should a simple blog like mine invoke Contentful's API every time a page is requested?
I decided to implement Static Site Generation (SSG), meaning all content is retrieved and stored during the build phase of the website. The result is that the website never needs to query external services like Contentful, which makes a huge difference in loading times.
As my website contains only a few pages and blogs this approach works like a charm. If your website contains loads of pages, this might not be the optimal approach.
Finally, I trigger a rebuild of the website when content is added or modified in Contentful. I could improve on this by implementing Incremental Static Regeneration to only regenerate pages that have changed.
Performance insights
Perceived website performance involves more than just the page loading times. By using tools like Google PageSpeed Insights you can quickly see what can be changed to improve the user experience.
Implementing simple changes like optimizing images can make a huge difference in perceived loading times.
Costs and maintenance
Besides the cost of two domains (erikdevries.nl and erikdevries.com), I currently don't pay anything for my website. Next.js and Tailwind CSS are free and opensource, and I use Vercel and Contentful for free within the free-tier limits (which are pretty generous for both services).
Besides the costs, I also have virtually no maintenance. There are no servers I manage and (almost) no software updates I have to take care of.
Conclusion
The topics I stated at the beginning of the blog are definitely accomplished. I learned a lot, had fun doing it, and ended up with a fast new website that doesn't cost me anything. Mission accomplished!
Are there no drawbacks at all? Not for me personally, but this solution is not for everyone. Do you have a commercial website with a large amount of data? Then you may not be able to use the free services of both Vercel and Contentful.
But for almost any non-commercial small to medium sized website, this is a very good (and especially economical) solution!