How to Set Up Redux in Next.js with TypeScript (The Easy Way 🚀)

Ever felt your Next.js app growing faster than your ability to manage state?

One component needs data from another, props are drilling like crazy, and suddenly your code feels like a messy WhatsApp group chat 😅.

That’s where Redux with Next.js and TypeScript comes in.

In this guide, I’ll show you how to set up Redux in Next.js with TypeScript step by step, using simple language, real-life examples, and developer-friendly tips.

Think of it like unlocking your phone — once you know the password, everything just works 📱.

What Is Redux?

Redux is a state management library.

In simple words:

👉 Redux is a central store where your app’s data lives.

Real-world example

Imagine a water tank on your roof:

• Every room (component) uses water
• You don’t store water separately in every room
• Everyone pulls water from one main tank

Redux works the same way:

• One store
• Many components
• Clean and predictable data flow

Why Redux Matters in Next.js

Next.js apps grow fast — especially dashboards, eCommerce stores, or SaaS apps.

Without Redux:

• Props drilling everywhere
• Hard-to-debug state issues
• Repeated API calls

With Redux:

• One source of truth
• Better scalability
• Cleaner and maintainable code

Ask yourself 🤔:

Do I want to manage state calmly or debug chaos at 2 AM?

Benefits of Using Redux with TypeScript

Real-life benefits developers actually care about:

• ✅ Type safety – Fewer runtime errors
• ✅ Predictable state – Easy debugging
• ✅ Scalable architecture – Perfect for large apps
• ✅ Great DevTools – Time-travel debugging is 🔥
• ✅ Team-friendly – Everyone follows the same pattern

Redux Toolkit vs Traditional Redux

👉 Redux Toolkit wins for modern Next.js apps.

Step-by-Step: Set Up Redux in Next.js with TypeScript

1. Install Required Packages

npm install @reduxjs/toolkit react-redux

Easy. No headache. No extra config.

2. Create the Redux Store

Create a folder: store/index.ts

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: {}
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

3. Create a Slice (Example: Counter)

store/slices/counterSlice.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    }
  }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

4. Add Slice to Store

import counterReducer from "./slices/counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

5. Wrap Next.js App with Provider

For Next.js App Router (app/layout.tsx):

"use client";
import { Provider } from "react-redux";
import { store } from "../store";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  );
}

Boom 💥 Redux is live.

6. Use Redux in a Component

"use client";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../store";
import { increment, decrement } from "../store/slices/counterSlice";

export default function Counter() {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

Simple. Clean. Powerful.

Best Tips: Do’s & Don’ts

✅ Do’s

• Use Redux Toolkit
• Keep slices small and focused
• Use TypeScript types properly
• Use custom hooks for dispatch and selector

❌ Don’ts

• Don’t store everything in Redux
• Don’t mutate state outside slices
• Don’t overcomplicate early

Common Mistakes Developers Make

• ❌ Using Redux for simple local state
• ❌ Forgetting "use client" in App Router
• ❌ Mixing server and client logic
• ❌ Not typing state properly

Avoid these, and you’re already ahead of many devs 😉.

Final Thoughts + Call to Action

Setting up Redux in Next.js with TypeScript is not scary anymore — and now you know it.

If you enjoyed this guide and want more real-world developer blogs, tutorials, and tips:

👉 Visit https://hamidrazadev.com

👉 Read. Learn. Build better apps.

Because clean code = peaceful mind 🧠✨

Happy coding! 🚀