Back

Jul 22, 2022

Jul 22, 2022

Are you Considering using NextJS Redux?

NextJS Redux has become very popular for state management over the years, but is it the right choice to use Redux with NextJS? Let's find out.

A man listening extra hard with his hand behind his ear.
A man listening extra hard with his hand behind his ear.
A man listening extra hard with his hand behind his ear.

NextJS Redux is a great choice for state management in React applications, but it has received its fair share of criticism as well. Any question about whether I should use X with Y is very difficult to answer, because the answer is, "It depends..."

Today, I will try to answer the question of should we use Redux in NextJS and show you some alternative ways of doing things that you might want to consider.

Should I use Redux with NextsJS?

If you want my direct opinion on this topic, you should really, really try to avoid using Redux in NextJS. It's not a NextJS best practice arguably.

Let me explain why.

Reason 1: NextJS Architecture Is Not Suitable for Redux.

The general architecture of a NextJS application is usually very different from a ReactJS application.

In NextJS, we have the concepts of getServerSideProps and getStaticProps which can populate the data required for a page before rendering. So, using Redux in NextJS often doesn’t make that much sense.

Reason 2: There are Alternatives to Redux.

React now supports Context, which can share common states between components.

If you have a lot of nested components that need a shared piece of data, then you can just use React Context. Like the following:

React Context example image.

Save to Pieces

In fact, there are many scenarios where you wouldn’t even need any centralized state management solution. I will go over some of those scenarios in this article!

Reason 3: Setting up Redux is Very, Very Complex.

If you still feel that you need Redux in your NextJS application, just a heads up...it’s really complex to set up Redux with NextJS.

You will need a special package named next-redux-wrapper to get it to work. Even after that, handling the server and client states and making them sync is a lot of pain. Read more about that here.

Reason 4: Redux Optimization in NextJS is Complex.

Even after all of these, if you manage to integrate Redux with NextJS, the next problem you will face is performance.

One big argument against React Context is its performance implications and using Redux can sometimes solve that issue with the use of selectors.

Selectors in react example Image.

Save to Pieces

Well, it’s hard to do in NextJS….

I am not saying it’s impossible but optimizing Redux properly for performance in NextJS can be very hard and takes a very long time.

Do you Need Redux with NextJS?

Glad you asked; I am not saying that you should not use Redux within NextJS applications.

All I am saying is ask yourself if you really need Redux. I will present you with some scenarios where you might think Redux is the way to go, but in reality, there are better alternatives.

Let’s explore, shall we?

Scenario 1: You Already Know What’s on the Page

Let’s just say you are building an e-commerce application where most of your URLs are pre-determined.

In a normal ReactJS application, we might think of fetching the details of the product and saving it to a Redux state and show them on the page, but in NextJS, there is a better way to do this:

Using products example imagine.

Save to Pieces

So if you know that users will go to a page, /product/{productId} then you already know the productId even before you load the page. You can just pre-fetch the data, pre-generate the page, and send it to your visitors improving your application's performance. In these cases, you can use getStaticProps because you already know what data will be there on the page already. It helps with caching too!

getStaticProps example image.

Save to Pieces

So if you know what data is going to be rendered on the page before you load the actual page, then you can just use getStaticProps and getServerSideProps and get the job done like a boss.

Scenario 2: You Don’t Know What’s Coming

This is a very common scenario in most real-life applications. We might know what comes in the initial page load, but the page's content depends on the user’s action.

A good example can be a product page with pagination. You only know what to load on the first page, but after the initial page load, the users might want to see the next page.

Like the following pagination on Amazon’s website:

Amazon pagination.

In this case, it’s tricky to use static generation because you have to fetch fresh data. Should you use Redux in this case?

The answer is no. You would be better off using some kind of query library like swr or react-query to manage the API data.

The following is an example using react-query:

A nextjs redux query to manage API data example image.

Save to Pieces

So why would you fetch data and store it in the Redux store when you can get awesome features like caching and pre-fetching all without using Redux?

Scenario 3: You Need to Share Some Common State Between Components

Let’s say your application has some kind of authentication setup. In this case, you will want to share the authentication state between components. For example, you may want to do this to show and hide a login button.

What do you do now?

You might think okay, so now I definitely need to use Redux to share the authentication state everywhere. Umm, actually, no. If you are handling such simple scenarios, you can just leverage good old browsers localStorage . Maybe, wrap it up inside a nice little hook.

 Local Storage Example Image.

Save to Pieces

If localStorage is not an option for you, then you should try to set up React Context first. But don’t get me wrong. Redux will work perfectly here. However, you should consider using the React Context API first, which comes with the everything itself and saves you precious bundle size! And it’s also easier to set up!

Do You Still Have Some Other Use Cases?

After all these scenarios, you may still have a specific use-case where you need a common state shared between your components and Redux still might be a consideration. My only advice is to not rush to reach for it. Look at NextJS redux examples and try to understand why you need it first and then use it properly so that it doesn’t create more problems than solving the ones you already have!

Become More Productive Writing Your React Apps

Every component you create in React often requires tons of repetition no matter what you do, and across every frontend project, there are always custom setups and best practices teams follow. Pieces helps you solve this for any React project by allowing you to create a local micro-repository where you can store any code snippets along with relevant metadata straight on your machine. Additionally, Pieces makes it incredibly easy to share your snippets with others, form collections to onboard others onto a project, and even has integrations to allow you to use your snippets directly in your IDE. Our team of developers are making changes everyday to make the most effective and efficient micro-repo for you. Be sure to make sure you are utilizing Chakra UI’s color mode in Next.Js properly.

Try Pieces now using the personal plan for free and supercharge your React projects!

Mohammad Faisal.
Mohammad Faisal.

Written by

Written by

Mohammad Faisal

Mohammad Faisal

SHARE

SHARE

Title

Title

our newsletter

Sign up for The Pieces Post

Check out our monthly newsletter for curated tips & tricks, product updates, industry insights and more.

our newsletter

Sign up for The Pieces Post

Check out our monthly newsletter for curated tips & tricks, product updates, industry insights and more.

our newsletter

Sign up for The Pieces Post

Check out our monthly newsletter for curated tips & tricks, product updates, industry insights and more.