By combining some React APIs, we can accurately manage “simple” states. With Next.js though, we can quickly find situations where we need to accommodate many other requirements, such as isolating state between pages or routes, and managing our data both in the server and client while bringing things in from third-party services. That’s a lot! Let’s have a look at some patterns to accomplish all that.

Smashing Magazine is a reputable publication that caters to web designers and developers, offering a  articles, tutorials, and resources to help them stay at the forefront of their craft. With a focus on practical, actionable insights, Smashing Magazine covers a wide range of topics, including frontend development, UX/UI design, performance optimization, and responsive web design. The platform also hosts conferences, workshops, and webinars, providing opportunities for professionals to network and further their skills. By following Smashing Magazine, developers can access resources to enhance their knowledge, skills, and career prospects in the rapidly evolving field of web development.

Smashing Magazine

This article is intended to be used as a primer for managing complex states in a Next.js app. The framework is way too versatile for us to cover all possible use cases. These strategies should fit the vast majority of apps around with little to no adjustments. If you believe there is a relevant pattern to be considered, I look forward to seeing you in the comments section!

State Management In Next.js — Smashing Magazine

Growing Pains Strike Again: Provider Hell