Easy setup react redux with next.js (React)

Assuming you have knowledge in Redux with React.

Firstly, install these packages

$ npm install next-redux-wrapper react-redux redux redux-thunk --save

$ npm install redux-devtools-extension --save-dev

Override or create the default App, create the file ./pages/_app.js as shown below:

import withRedux from 'next-redux-wrapper'
import { Provider } from 'react-redux'
import { withRouter } from 'next/router'
import App from 'next/app'

import createStore from 'store/createStore'

class MyApp extends App {
  render () {
    const { Component, pageProps, router, store } = this.props
    return (
          <Provider store={store}>
              <Component router={router} {...pageProps} />
          </Provider>
    )
  }
}

export default withRedux(createStore)(
  withRouter(MyApp)
)

In your pages/component, you can use Redux as you do normally.

https://github.com/vercel/next.js/tree/canary/examples/with-redux-wrapper

cant get any easier than this

Here is my simplest way, you can follow it. https://github.com/imimran/next-redux-example

I would recommend using redux toolkit because it reduces boilerplate code in redux...

With createSlice you create Action and Reducer at the same time. And in case of dispatching API calls to the backend and performing suitable state mutations for pending, fulfilled and rejected API calls, createAsyncThunk is the Best!

As per my personal experience, if you are asking this question just for initial learning, then your first setup that you attached as an answer is enough but for a real App, so should definitely go with Redux Toolkit. You can check this sandbox example