Notifications page with Next.js 14, TypeScript, and Tailwind CSS

I was reading a tutorial on how to use Next.js as a static site generator, so I tried using it on a FEM challenge for practice. I chose this challenge because unlike blog posts, notifications usually change more often, so it makes sense to choose a framework that has client/server-side rendering over an SSG to avoid rebuilding the site every time the data updates.

I learned about Server Components in React, so even if JavaScript is disabled, the notifications still appear (yay progressive enhancement!). I even made a skeleton loading UI as the data for the cards are being fetched, but somehow they didn't work in production build. Might look into that when I have some time...

Working with Next.js is nice, a lot of things are already prepackaged for you (e.g. no need to download Google Fonts - just import the font you want from next/font/google). Though sometimes I get confused whether I should make a piece of code a server or client component. Any tips and advice for those who are more experienced in Next.js would be appreciated.