Redux Setup in Next.js with TypeScript: Step-by-Step Guide

June 12, 2024

State management is a crucial aspect of modern web development, especially in complex applications where data flows through multiple components. Redux is a popular library for managing state in React applications, and when combined with Next.js and TypeScript, it provides a powerful setup for building scalable and maintainable applications.

In this comprehensive guide, we will walk you through the process of setting up Redux for state management in a Redux Setup in Next.js project using TypeScript. This guide will cover everything from initial setup to advanced usage, ensuring you have a robust foundation for managing state in your application.

Introduction to Redux, Next.js, and TypeScript
Setting Up the Project
Installing Dependencies
Configuring Redux with TypeScript
Creating Actions and Reducers
Setting Up the Redux Store
Integrating Redux with Next.js
Using Redux in Components
Advanced Redux Usage
Conclusion

1. Introduction to Redux, Next.js, and TypeScript

What is Redux?

Redux is a predictable state container for JavaScript apps. It helps you manage the state of your application in a centralized manner, making it easier to reason about and debug your application.

What is Next.js?

Next.js is a React framework that enables server-side rendering and static site generation. It provides a great developer experience with features like file-based routing, API routes, and built-in CSS and Sass support.

What is TypeScript?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds static types, which can help catch errors early in the development process and improve the overall robustness of your code.

2. Setting Up the Project

To get started, we need to set up a new Next.js project with TypeScript. You can do this using the Next.js CLI.

Open your terminal and run the following commands:

npx create-next-app@latest my-redux-next-app --typescript
cd my-redux-next-app

This will create a new Next.js project in the my-redux-next-app directory with TypeScript support enabled.

3. Installing Dependencies

Next, we need to install Redux and related dependencies. Run the following command to install Redux, React-Redux, and Redux Toolkit:

npm install redux react-redux @reduxjs/toolkit

Additionally, we need to install @types/react-redux for TypeScript type definitions:

npm install --save-dev @types/react-redux

4. Configuring Redux with TypeScript

Creating the Redux Slice

Redux Toolkit simplifies Redux setup by providing a createSlice function to create actions and reducers. Let’s create a slice for managing a simple counter-state.

Create a new directory store in the root of your project and add a file counterSlice.ts:

// store/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;

Setting Up the Redux Store

Next, create a file store/index.ts to set up the Redux store:

// store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

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

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

export default store;

5. Integrating Redux with Next.js

Adding Redux Provider

To integrate Redux with Next.js, we need to wrap our application with the Redux Provider. Next.js provides a custom App component that can be used to wrap the entire application.

Create a file _app.tsx in the pages directory:

// pages/_app.tsx
import { AppProps } from 'next/app';
import { Provider } from 'react-redux';
import store from '../store';

const MyApp = ({ Component, pageProps }: AppProps) => (
  <Provider store={store}>
    <Component {...pageProps} />
  </Provider>
);

export default MyApp;

6. Using Redux in Components

Connecting Components to Redux

Now that our Redux store is set up, we can connect our components to it. Let’s create a simple counter component that interacts with the Redux state.

Create a file components/Counter.tsx:

// components/Counter.tsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../store';
import { increment, decrement, incrementByAmount } from '../store/counterSlice';

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
};

export default Counter;

Using the Counter Component

Finally, let’s use the Counter component in a page. Open the index.tsx file in the pages directory and modify it as follows:

// pages/index.tsx
import React from 'react';
import Counter from '../components/Counter';

const Home = () => (
  <div>
    <h1>Welcome to Next.js with Redux and TypeScript</h1>
    <Counter />
  </div>
);

export default Home;

7. Advanced Redux Usage

Middleware

Redux middleware provides a way to intercept dispatched actions before they reach the reducer. Middleware can be used for logging, crash reporting, performing asynchronous operations, etc.

Example: Adding Redux Thunk for Asynchronous Logic

First, install Redux Thunk:

npm install redux-thunk

Modify the store configuration to include Redux Thunk:

// store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
});

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

export default store;

Async Actions with Thunk

Create an async action to simulate fetching data from an API:

// store/counterSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { AppThunk } from './index';

interface CounterState {
  value: number;
  loading: boolean;
}

const initialState: CounterState = {
  value: 0,
  loading: false,
};

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;
    },
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.loading = action.payload;
    },
  },
});

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

export const fetchCount = (amount: number): AppThunk => async (dispatch) => {
  dispatch(setLoading(true));
  setTimeout(() => {
    dispatch(incrementByAmount(amount));
    dispatch(setLoading(false));
  }, 1000);
};

export default counterSlice.reducer;

Use the async action in the Counter component:

// components/Counter.tsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../store';
import { increment, decrement, fetchCount } from '../store/counterSlice';

const Counter = () => {
  const dispatch = useDispatch();
  const { value, loading } = useSelector((state: RootState) => state.counter);

  return (
    <div>
      <h1>Counter: {value}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(fetchCount(5))} disabled={loading}>
        {loading ? 'Loading...' : 'Increment by 5 (Async)'}
      </button>
    </div>
  );
};

export default Counter;

Type Safety with TypeScript

TypeScript enhances the developer experience by catching type errors at compile time. Ensure your Redux setup is fully typed for maximum benefit.

Example: Typing Thunk Actions

// store/index.ts
import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>>;

export default store;

8. Conclusion

Setting up Redux for state management in a React, Next.js, and TypeScript project can seem daunting at first, but with the right approach, it becomes manageable and highly beneficial. By following this step-by-step guide, you now have a solid foundation for managing state in your application using Redux.

Redux, combined with Next.js and TypeScript, provides a robust solution for building scalable and maintainable applications. The flexibility of Redux and the type safety of TypeScript ensure that your codebase remains clean, predictable, and easy to debug.

Also read React state management: context API vs Redux

Summary of Key Points

Project Setup: Initialize a Next.js project with TypeScript.
Installing Dependencies: Install Redux, React-Redux, Redux Toolkit, and necessary TypeScript types.
Configuring Redux: Use Redux Toolkit to create slices, reducers, and actions.
Integrating with Next.js: Wrap the application with the Redux Provider.
Using Redux in Components: Connect components to Redux using hooks.
Advanced Usage: Implement middleware and async actions using Redux Thunk.
Type Safety: Ensure all Redux actions and state are fully typed with TypeScript.

By integrating Redux Setup in Next.js application with TypeScript, you enhance your application’s performance, maintainability, and scalability, making it ready for production-level challenges.

# Next.js, Redux

Sourabh Mourya