audiophile e-commerce NextJs Tailwind

well... This is my first NextJs project ever, I admit that I haven't leveraged all its good features, yet it was quite fun.

Difficulties:

• images: if you try the live demo you can see that the images are losing quality once they got optimized with <Image/> component (if you got a good resource hope you drop it here)

• Suspense: for some reason suspense had a weird response when I tried to use it and it gave me a hard time although I use it often in React.

• Hydration: it's just annoying once in a while I get a hydration error and keep debugging until I realize it's just a random extension causing it.

• Components: I forgot not to add margins/paddings to components, the thing that made it a bit hard to maintain the same sizes as shown in the designs.

• Mongoose: I found it hard to know how to establish a single connection in the entire app and make use of it unlike using Mongodb

Things I should have considered:

• Drawing a workflow Schema: once I got the project; I started building it without even considering having spare time to classify the components ( Client / Server ), what strategy for acquiring data to go for (use Mongoose directly / use API routes i end up using both :) ) especially once many events happened and entrapped the journey.
• Starting with something easier: this is a fairly easy project, but I made it harder by not considering my lack of knowledge of the framework and its catches especially when it comes to Nextauth, (it's a disaster, manually using JWT/node would have been easier).

In case you have a good info/advice /resource I would be grateful to see it