How to install and Implement Redux Tool-kit on the next.js app

To use Redux Toolkit in a Next.js project, we’ll need to set up Redux for state management and integrate it with the Next.js application.

1. Install Required Packages

First, we need to install Redux Toolkit and the React-Redux library.

npm install @reduxjs/toolkit react-redux

2. Create a Redux Slice

A slice in Redux Toolkit contains the reducer logic and actions for a specific part of the state.

Create a features folder, and within it, create a new file called counterSlice.js (or any name relevant to your state).

// features/counterSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

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

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

export default counterSlice.reducer;

3. Configure the Redux Store

Next, set up the Redux store by combining your slices. Create a store.js file in a store folder.

// store/store.js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counterSlice';

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

4. Integrate Redux with Next.js

Now, we need to make the Redux store available to your Next.js application.

Create a _app.js file if it doesn’t already exist in the pages directory. Wrap your application with the Provider component from react-redux and pass in the store.

// pages/_app.js

import { Provider } from 'react-redux';
import { store } from '../store/store';

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

export default MyApp;