It was time for an upgrade
Yeah, I did have home page... It just happened to be my very first web development project ever. The source code was messy, the content was not well optimized and the UI consisted of default bootstrap components. I wanted to implement some new functionality like a showcase for my projects, but just looking at the project directory made me feel sick. I looked at my mess of a file structure and came to the conclusion that rather than fixing it, I would be better off just starting from scratch while making sure to implement all the new practices I've learned since.
Choosing a framework
Honestly, Next.js was a clear choice. I have been been toying with it for a while now, doing some smaller projects and learning about the new App router features. I knew enough to the point where I could get the desired look and functionality without constantly checking the documentation. So what I planned was:
- I code my website in Next.js
- I have information about my projects somewhere
- I replace my old website with pretty much a drop-in replacement A good plan right? Well, I did come across some roadbumps...
Netlify and Next.js is not a good combo
It actually took me a while to notice, but Netlify has some big flaws when deploying a server-side rendered Next.js app. The deployment itself was very smooth and my idea of a drop-in replacement was a working one. That was, until I saw the page reload when clicking a link. I knew for a fact that was not supposed to happen.
In Next.js links are made using the framework specific <Link> -components. These are used in optimizing the client side navigation by prefetching the link's contents and opening them on the "same page". Pretty much SPA functionality, where the browser does not need to reload the whole page when moving between the site's locations. Nice and fast, when the browser has cached the needed resources.
What happened on Netlify, was the whole page was reloaded when clicking on a link, even if it was using the <Link> -component. I did some digging and found out other developers were facing the very same issue, in addition to a plethora of other framework specific issues, when trying to deploy Next.js on Netlify. Someone had posted a comparison of the same source code deployed to both Netlify and Vercel, where the Netlify one was clearly reloading the page on navigation. The Vercel one was behaving nicely and had no issues. It was time for me to migrate over to Vercel.
The migration...
...was actually super easy. I had my old website deploying straight from my GitHub repository's main -branch. I removed the Netlify's automatic deployment from the repo, deleted the project on Netlify and obliterated my netlify.toml configuration-file from the project root. I moved on to Vercel, started a new project, pointed the new project to my repository and allowed continuous deployments from the main -branch. I then went to the projects domain management section and added my domain and subdomains. The next step was just logging into Namecheap and changing the CNAME Records to point to my new site on Vercel. Now I could clickity-clack the links as much as I desired, without the page reloading on every click. Amazing, I know. The only thing missing was form functionality. I had used Netlify forms for my contact form, but since Vercel had no equivalent service, I had to find a new solution.
I toyed with the idea of making the whole system myself but I had still alot of other features I was working on. After doing some research and comparing the different form-submission services, I ended up going with Web3Forms. Their free tier, ease of implementation and cuntomization struck out to me as a good-for-all package. It even came with a hCaptcha functionality built in! I implemented the form in an afternoon and had my form back up and running in no time! The hCaptcha was giving me a bit trouble, but more on that later.
Headless CMS for projects
At this point I had my front page fully working, my navbar scrolling smoothly to the different sections and my CSS animations on fleek. However, the featured projects were still getting their data from a hard coded array of objects inside the component. This was no good, so while I started implementing the /projects -page, I started looking at different Headless CMS solutions. This is when I recalled a recommendation from one of my peers. They had previously suggested DatoCMS in a diferent context. I started going through the DatoCMS pricing model and documentation. Long story short, I ended up going with them and am currently writing this post on their text editor. The setup was effortless and the next thing I know, my /projects -page's content is completely dynamic and handled elsewhere. I don't have to touch the site's source code just so I could add a quick article about a project I've been working on.
Raising the performance
At this point I decided to check the site's performance using PageSpeed Insights. I thought I had done everything alright, but then I got hit with that performance score of 60. Oof. Lucky, or unlucky, depending on who you ask, the biggest reason for the poor performance was... the form hCaptcha. And at this point I made propably the most infuriating overlook of the entire project. I forgot about lazy loading. I was stuck trying to fix the hCaptcha, trying different approaches like using a dedicated component library or embedding using vanilla js.
I was about to just accept that I can not fix third party slowness, until I got an email from Web3Forms asking for a review of their service. I left a review and as a side note mentioned about my struggles with the hCaptcha. The next day, I got a response suggesting lazy loading. I felt like a dumbass and implemented it right away. Problem fixed and the site's performace score shot up to over 90. The rest was just some minor image optimization and the perfect score of 100 was achieved! (aaaand obviously, when going to get the screenshot, it's 99, but anyways, it's good enough for now)
What is next for this project?
Gotta get that SEO handled. A nice Open Graph setup and meta data for the different pages and projects. Other thatn that, propably not much. I'll be focusing on other projects from now on with the confidence that they now have a good home to live in. I'm propably going to start looking into Golang, since that seems useful for future endeavors... 🤔