Monday, November 25, 2024 – Last week, I focused on refining the user interface of the website I am currently building. A key milestone was improving the breadcrumbs component, which I initially created by referencing a popular tech blog. While the component functioned well, it did not fully accommodate the dynamic routing I had implemented. Additionally, the homepage unnecessarily displayed the “Home” breadcrumb, which was not ideal.
To resolve this, I added a condition within the component to filter out the “Home” breadcrumb when the route was read in the component originated from the homepage. This adjustment worked; however, another challenge arose, displaying the dynamic slug route appropriately within the breadcrumb. Since I used Next.js optional dynamic routing for SEO purposes, the breadcrumb also displayed irrelevant object names instead of just the intended page titles. To address this, I added a filter to clean up the route data, ensuring it displayed the desired output. After some iteration, this solution worked, but I am still reflecting on whether my implementation aligns with clean code principles.
In addition to the breadcrumb enhancements, I revisited the thumbnail gallery component I had previously created. While the design required only minor tweaks, I realized that turning this component function to a client-rendered only on the edge component was essential. The gallery’s functionality relies on a callback to update the main image display when a thumbnail is hovered over. This required using useState, which automatically converted the page to a client-rendered component.
To enable server-side rendering, I refactored the gallery by exporting the main image and thumbnail into their own components. This allowed state changes to be handled outside the page itself. After some trial and error, I successfully implemented this approach.
Throughout the week, I also worked on basic structural components like the navigation bar, footer, and header. While these designs are currently simple, I prioritized practicality to ensure functionality.
Towards the end of the week, I discovered an oversight, one of the pages was still fetching data from a JSON sample file instead of a dummy API. This conflicted with my plan to render the page on the server side. After switching to the API, the page became client-rendered again. I’ve marked this as a task to revisit later, as my focus is currently on completing higher-priority items.
While there’s still much to do, these iterative improvements have brought me closer to achieving goals for the project.