Monday, November 18, 2024 – Last week, I focused on enhancing the user interface of a Next.js website, specifically designing a page where images serve as the main attraction. Before diving into image implementation, I first tackled the challenge of structuring the website path for this page. The goal was to create a dynamic route that incorporated multiple parameters in the URL, ensuring it was both descriptive and SEO-friendly.
To achieve this, I utilized Next.js dynamic routing by wrapping file or folder names in square brackets [segmentName]. However, since the segment combined multiple data points, I initially struggled to retrieve the data correctly. Eventually, I discovered that using Optional Catch-All Segments allowed me to retrieve multiple parameters seamlessly, resolving the issue.
With the routing set up, I shifted my focus to building a thumbnail gallery for the page. As I had limited experience with such implementations, I researched how to achieve this using Tailwind CSS. Initially, I was uncertain whether Tailwind alone could handle the task or if I needed a third-party package for pre-built components. To my surprise, Tailwind proved to be a powerful tool. Its utility-first classes enabled me to design the gallery effectively, including adding hover effects and transitions without needing JavaScript or React hooks for simple interactions. This approach helped keep the page lightweight by minimizing unnecessary client-side rendering.
During the trial-and-error process of designing the gallery, I referred to a sample website provided by Mr. Peter and explored popular design references online to create a visually appealing layout.
For this page, I also needed icons. At first, I considered using an external icon library. However, I hesitated, as importing a library, especially one that isn’t widely used or actively maintained, might not be ideal for long-term project stability, especially since I only needed a few icons. I then found an alternative: using SVGs as components, which turned out to be a flexible and lightweight solution. By leveraging an AI tool, I generated customizable SVGs that allowed me to adjust their colors and sizes without pixelation issues. These SVGs fit seamlessly into the project.
Throughout the week, I focused on beautifying the thumbnail gallery to enhance the user experience. I implemented hover effects on the images, making interactions more engaging and visually appealing.