Next.js Discord

Discord Forum

state management

Unanswered
Hermit Warbler posted this in #help-forum
Open in Discord
Hermit WarblerOP
what's the best solution to use when it comes to state management in next.js projects?

4 Replies

Korean bullhead
It really depends on your application requirements. I often find it useful to start with component state, useState calls and Context (https://react.dev/learn/passing-data-deeply-with-context)

With the app router there is also the option to use url parameters to store state:
https://www.reddit.com/r/nextjs/comments/16wnh2y/how_to_use_url_state_with_the_app_router_zero/

If you are making client side api requests, SWR and Tanstack Query are great options for providing simple hooks that help you manage fetching and loading states efficiently. https://swr.vercel.app/ https://tanstack.com/query/v4/docs/framework/react/guides/queries

I hope that will give you so options to try
Korean bullhead
I haven't used it myself but I'm aware of it, there are so many great solutions out there. My advice would be to start small and try to plan out how state would be used within the application. Then find something that fits your requirements. I think when starting a new project, there's a temptation to add state management library and apply everything to it, which can end up making your codebase slow and complicated.
Have a look at some patterns in the react and next.js examples repos online and the links in my previous message, hopefully you'll find something that suits your needs.
Rule of thumb for state management:

Use regular react state, then use url state, then think long and hard if you need a state management library or if it’s actually your code that could be simplified or refactored to be cleaner, then use a state management system. I like zustand personally but I’ve only used it once on an incredibly complex project where regular state management wasn’t cutting it.