next.js with global state management

Question

as using create-react-app, for very large react application, I intend to write all my future app in next.js, because it's rich default built-in feature.

My question, when I was building a very large enterprise app, I use redux for global state management. Because there are lots of share states i need and Redux is a very good choice with a big team.

what do you people prefer, if you need to build a very large web application in next.js where you have so many global data and need global state management solution ?

score 5 · Accepted Answer · answered Sep 10 '20 at 14:15

Redux works fine with Nextjs so you can't go wrong there. I think for large applications redux makes sense as it is the most widely known.

If you're working on smaller personal projects but want a similar global state style as redux but with less setup and boilerplate you can check out Zustand It's by the react-springs team.

It is easy to implement. All you'd need to do is modify the default template to wrap your pageprops, like so:

const App = ({ Component, pageProps }) => {
    Store.setState(pageProps);
    return <Component />;
};

score 0 · Answer 2 · answered Aug 27 '22 at 18:12

In big enterprise applications, you have to worry about performance and scalability. You should be avoiding unnecessary data fetching or disk IO operations by caching data properly. Whatever state management you set, you have to make sure that your application has low latency. Redux is one option but the other option is using swr+contextApi together to replace redux. I explained it here Global state management and Next.js

Basically instead of reducers, you write hooks and inside hooks you use swr package for data fetching.

next.js with global state management

2 Answers2