⚡ Redux with React vs Redux with Next.js

State management is a crucial part of modern frontend development. Redux is one of the most popular state management libraries in the React ecosystem. But how it works with React and Next.js differs slightly due to SSR (Server-Side Rendering) in Next.js. Let’s break it down.

🔹 Redux with React

In a typical React application:

• Redux helps manage global state, so different components can share data easily.

• Common use cases: user authentication, shopping cart, theme settings, etc.

• Basic setup:

  1. Install Redux and React-Redux:

     npm install @reduxjs/toolkit react-redux
     

  2. Create a slice using Redux Toolkit.

  3. Configure the store and wrap your <App> with <Provider>.

  4. Use useSelector to read state and useDispatch to update state.

Example

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useSelector, useDispatch } from 'react-redux';

// Slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
  },
});

// Store
const store = configureStore({ reducer: counterSlice.reducer });

function Counter() {
  const value = useSelector((state) => state.value);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(counterSlice.actions.increment())}>{value}</button>
}

// App
export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

✅ Works perfectly for CSR (Client-Side Rendering) apps.

🔹 Redux with Next.js

Next.js adds SSR/SSG (Server-Side Rendering / Static Generation) to React, which makes Redux integration slightly different:

• The Redux store can be created per request for SSR to prevent data sharing between users.

• You often use a wrapper library like next-redux-wrapper for proper SSR support.

• Can be used for both client-side and server-side data hydration.

Example Setup

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1 },
  },
});

const makeStore = () => configureStore({ reducer: counterSlice.reducer });

export const wrapper = createWrapper(makeStore);

Then in _app.js:

import { wrapper } from '../store';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default wrapper.withRedux(MyApp);

• SSR pages can preload data in getServerSideProps or getStaticProps and inject into the Redux store.

• Ensures universal state management between server and client.

🔹 Key Differences

Feature React + Redux Next.js + Redux Rendering Type CSR only CSR + SSR/SSG Store Setup Simple <Provider> wrapper next-redux-wrapper or custom SSR setup Data Hydration Client-side only Server-side preloaded + client-side hydration Use Cases SPA apps SSR/SSG apps, SEO-friendly apps Complexity Low Slightly higher due to SSR handling

🔹 Conclusion

• React + Redux → Perfect for single-page apps and purely client-side projects.

• Next.js + Redux → Necessary for server-side rendered apps where global state needs to be consistent between server and client.

💡 Tip: If your Next.js app mostly uses CSR, Redux works exactly like in React. Only consider SSR/SSG when you need server-side data or SEO.