Mars RoverGram

I got the luxury of working with some of the latest and greatest hooks provided by React 18 like useFormStatus, useFormState, and useOptimistic. Since these hooks are stable and preleased under the Canary channel, Next.js v14 now supports them. While these hooks are stable, there are a few more things to keep in mind, especially as Next.js moves towards a separation of concerns between client components and server components.

These hooks provide some additional data when submitting forms to client components, like a pending state (Next.js Docs). With these values, we can then update the Front end as needed, while the server actions take care of what happens under the hood. Without these hooks, the GUI behaved like how GUIs behaved 15 years ago, where it did not have a loading state as it was fetching new images based on new parameters.

In the past, I have used pre-processors like SASS and I loved them. They allow flexibility and reusability of CSS code. I have also used component libraries like Chakra-UI and Material-UI (MUI). In recent years new tools have emerged, and one of them is TailwindCSS. I have heard mixed things about TailwindCSS, so I decided to use it on this project to form an opinion myself.

One of the things these all have in common is the time required to get these configured on your project or product, and having a solid foundation will prevent weird errors in the future. Once you have the project off the ground and configured, adding to the codebase becomes easier. Some things to keep in mind while configuring these tools are hydration, and client and server components. These will help you when you begin seeing inconsistencies or Flash Of Unstyled Content (FOUC).

I did some research and found that TailwindCSS can be lightweight, especially for smaller projects. It has a “prune” feature that removes styles that are not in use. I can see this become very useful should the application become complex. Reading the documentation motivated me to continue using it, as I also use utility classes. The naming of the Tailwind classes resembled some of the classes I used like flex, or mr-1.

After working with TailwindCSS, configuring it was the steepest curve, but once I began developing, TailwindCSS became very useful!

I can see using TailwindCSS in the future, and perhaps combining it with the MUI Base components (MUI Base Docs)!

In v14, Next.js is separating client components and server components to achieve a separation of concerns. With this comes server actions, which are asynchronous functions that are executed in the server but can be used in client components and server components. These functions handle form submissions and data mutations.

In my opinion, server actions keep the file structure more organized. Tied with the React 18 hooks, and the UI can be rendered and updated much easier without the need to add third party dependencies.

Since I aimed to keep this project lightweight, I decided not to use MUI. MUI is a components library that also helps define accessibility features and keyboard navigation (MUI Docs). TailwindCSS on the other hand, does not add these features and instead leave it up to the developer to define them.