Muhammad Hamid Raza

Posted on Jan 21

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

#redux #nextjs #tutorial #typescript

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	Traditional Redux
Less boilerplate	Too much code
Easy setup	Complex setup
Built-in best practices	Manual configuration
TypeScript friendly	Type definitions everywhere 😵

👉 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! 🚀

DEV Community