Headless Personal Website

Migrating from Gatsby.js to Next.js brought unique challenges and learning experiences for optimizing my website’s performance. Gatsby’s image optimization drastically improved load times and added an elegant blur effect to all images. However, upon migrating to Next.js, I initially faced a slowdown in performance due to the loss of Gatsby’s image optimization features.

Thankfully, Next.js offers a comparable image optimizer (Next.js Docs), though with a twist. While it matched Gatsby’s functionality, the blur effect required additional adjustments, especially for images hosted on external platforms like a CMS or AWS S3. To mitigate this, I turned to Netlify’s Image CDN (Netlify Docs) in conjunction with the Next.js Image Loader temporarily, while actively seeking alternative solutions.

Originally considering a home-grown solution, I stumbled upon the Next-Image-Export-Optimizer package (NPM) during my research. Its resemblance to my initial plan intrigued me. After seeing it’s bundle size (Bundlephobia Analysis) and release history, I decided to add it to my project and configure it.

Overall, while this approach required additional configuration and research, it deepened my understanding of optimizing production environments while shedding light on how Gatsby’s image optimization works under the hood. Now, under Next.js v14, my website’s performance has not only rebounded but surpassed the efficiency of its Gatsby predecessor.

When I wrote v4 of my website, I was focused on design and architecture, but missed one critical part of the website, keyboard navigation for accessibility.

Keyboard navigation on the web is crucial for ensuring accessibility and usability for individuals with disabilities, especially those who rely on assistive technologies like screen readers or individuals with motor impairments. Here are some additional reasons:

1. Accessibility: Many users navigate the web using only a keyboard due to motor disabilities or visual impairments. Proper keyboard navigation ensures that these users can access and interact with the content effectively.
2. Compliance: It’s a legal requirement in many regions (such as the Americans with Disabilities Act – ADA) for websites to be accessible to all users, including those who rely on keyboard navigation.
3. User Preference: Some users simply prefer using keyboard shortcuts for faster navigation, even if they don’t have any disabilities. Enabling keyboard navigation provides an alternative and often more efficient way to interact with a website.
4. Mobile Devices: Keyboard navigation isn’t just for desktops; it’s also important for mobile devices that support external keyboards or have accessibility features enabled.
5. User Experience: Seamless keyboard navigation improves overall user experience by making the website more efficient and easier to use, which benefits all users.

Check out version 4 of my website and compare it with this current version when it comes to navigating using the keyboard.

Deciding which front-end technology to use was the hardest part. Both, Gatsby.js and Next.js are open source technologies, which was a big plus. After some research, I chose to go with Gatsby.js for the front-end of my website, hosted on Netlify.

Between Next.js and Gatsby.js, I chose GatsbyJS because it uses Static Site Generation (SSG) to pre-render pages. Not only will this help my website be lightning fast, but it will also help the Gatsby server not work as hard as most servers do when hosting WordPress websites.

The headless architecture helps my website as I plan to use it in the future for blogs, tutorials, and to continue building my portfolio. Furthermore, this means that my website will not be changing constantly. If it were, say, an e-commerce website, then Next.js would have been the better choice. Finally, as I already knew how to work with GraphQL and React, developing in GatsbyJS was a breeze.

One of the greatest things about a headless website structure, is that if I ever choose to add a shop on my website, or if I begin using a new front-end technology, all content I currently have will stay untouched, as it is decoupled from the design. All I would need to do is built the front-end! This is also true if I ever want a new content updates, they can be done through WordPress.

2023 Update
After going through the State of JavaScript survey results, I realized how much Gatsby’s popularity has been falling in comparison to Next.js, so it was time to migrate to where the JavaScript community is heading.

Migrating to Next.js version 14 allowed me to work with and familiarize myself with the latest and greatest technologies, and I am very happy I made the change! I am now free to pick and choose which type of rendering I want (Server Side Rendering or Static Site Generation) based on the page.

Content Management Systems are great for websites, as it allows to create and update content much easier. Unfortunately, there are many CMS platforms to choose from. Fortunately, Gatsby works with most of the top CMS platforms!

Since I have already worked with GraphQL, the CMS that I preferred had to have a GraphQL endpoint, either natively, or via an extension to the CMS. I decided to go with the WordPress CMS for three reasons:

• WordPress is the most popular CMS platform. On top of that, WordPress has a strong community support, as well as strong documentation.
• I had prior experience working in WordPress through Rutgers University in 2018, and later professionally.
• WordPress plugins called “WP GraphQL”, and allowed me to seamlessly integrate with a Frontend framework or library.

WordPress is a great CMS, with even greater popularity on the web which means that it will have constant support and documentation. The fact that it is open source allows me to view and edit the WordPress file system according to the best practices with its documentation.

Editing the file system also allows me to add my own features on top of the ones that WordPress already offers. Unfortunately, there is a small learning curve to understanding all features WordPress offers, but that is expected with any new tool! Once I became familiar with how each of these features worked, I was able to add the necessary custom tools needed to continue building the backend structure of my website.