Responsive e-commerce website with Next.js 13 App router
Solution retrospective
Having some hydration issues on my checkout page when I have items in my cart. In src/app/components/checkout/Cart.tsx, I can fix this by making my cartItems state and setting the state to { ...localstage } in a useEffect, but this doesn't allow me to update my cart in real time without force refreshing, since router.resfresh() doesn't seem to help. Haven't put much time thinking about this but if anybody has any quick feedback, feel free to drop some.
Any other feedback much appreciated! Also more specifically Next.js 13 with app router best practices.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Greetings, kasey! 👋
Nice job on this challenge! The UI looks great 👍
I don't have time to look at all of your code but I had a quick look at the Card component. You don't really want to be using the router to refresh the page to display changes in the UI (that's a bit of anti-pattern as this is what React state is for). Instead, if you store the card data in some state then any time you update that state, React will re-render any components which use that state and update the DOM for you. You can then update local storage with that new state value if you want persist data that way for this project. Also since some of the cart data appears in other places around the site (such as in the product pages), you may want to store that state higher up in your app and pull it into components with React context. If you want to learn more about React state or context, I'd recommend checking out the new React docs as they are very-well written and include a few helpful guides. Hopefully that makes sense 👍
Keep coding (and happy coding, too)! 😁
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord