Redux with Persistent State Rehydration in Next.js
Tags: nextjs, redux, javascript, react
Published: 2023-10-31 20:06:18

In a Next.js application, incorporating Redux for state management and persisting and rehydrating the state is crucial for ensuring a seamless user experience. This tutorial will guide you through setting up Redux and using Redux Persist for state persistence and rehydration in a Next.js application.

## Prerequisites

Before getting started, make sure you have Node.js and npm installed on your machine. If not, you can download and install them from the official website.

## Step 1: Creating a Next.js Application

Let's begin by creating a new Next.js application. Open your terminal and execute the following command:

```bash
npx create-next-app my-next-app
```

Replace `my-next-app` with the desired name for your project. This command sets up a new Next.js application for you.

## Step 2: Installing Redux and Redux Persist

To add Redux and Redux Persist to your project, run the following command in your project's root directory:

```bash
npm install redux react-redux redux-persist
```

This will install the necessary dependencies for Redux and Redux Persist.

## Step 3: Setting Up Redux

In your Next.js project, create a folder named `redux` inside the `src` directory. This folder will house your Redux configuration.

Inside the `redux` folder, create a file named `store.js` to set up your Redux store and include Redux Persist:

```javascript
// src/redux/store.js

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);
```

## Step 4: Create Reducers

Inside the `redux` folder, create a folder named `reducers`. This is where you'll define your reducers. For this example, let's create a simple counter reducer. Inside the `reducers` folder, create a file called `counterReducer.js`:

```javascript
// src/redux/reducers/counterReducer.js

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;
```

## Step 5: Creating Actions

In your `redux` folder, create a folder named `actions`. Create a file named `counterActions.js` to define your actions:

```javascript
// src/redux/actions/counterActions.js

export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});
```

## Step 6: Integrating Redux into Next.js

In your Next.js application, you need to integrate Redux. Create a file named `_app.js` in the `pages` directory. This file is special in Next.js and wraps your entire application with global components. Import the `Provider` component from `react-redux`, your Redux store, and the `PersistGate` component from `redux-persist/integration/react`:

```javascript
// pages/_app.js

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from '../src/redux/store';

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

export default MyApp;
```

## Step 7: Using Redux in a Component

You can now use Redux in your components. Let's create a simple counter component to demonstrate how Redux works. In the `pages` directory, create a file named `index.js`:

```javascript
// pages/index.js

import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from '../src/redux/actions/counterActions';

export default function Home() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Redux Counter Example</h1>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}
```

## Conclusion

You have successfully set up Redux with state persistence and rehydration in your Next.js application. With Redux Persist, your application's state will be saved and restored even after page refreshes or navigation.

Feel free to expand upon this basic example and implement more advanced features as your project requires. Redux and Redux Persist offer a robust solution for state management in Next.js applications. Happy coding!