How I Setup Redux with RTK Query on NextJS Project

Installation

1. Setup NextJS Project

npx create-next-app@latest --ts

2. Install next-redux-wrapper & @reduxjs/toolkit

yarn add next-redux-wrapper react-redux @reduxjs/toolkit

3. Create store with creating file named store.ts

import { configureStore } from '@reduxjs/toolkit'
import { createWrapper } from 'next-redux-wrapper'

export const makeStore = () =>
  configureStore({
    reducer: {
      // reducer goes here
    },
    middleware: (gDM) =>
      gDM().concat([
        // middleware goes here
      ]),
  })

export type AppStore = ReturnType<typeof makeStore>
export type RootState = ReturnType<AppStore['getState']>
export type AppDispatch = AppStore['dispatch']

export const wrapper = createWrapper<AppStore>(makeStore, { debug: true })

4. Wrap _app.tsx with redux wrapper

import type { AppProps } from 'next/app'
import { wrapper } from './store'

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

export default wrapper.withRedux(MyApp)

5. Create custom hook

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

6. Setup middleware, reducer

// Todo update We can refer to this link RTK Quick Start.

7. Setup server side rendering with NextJS

// Todo update We can refer to this link RTK Server Side NextJS.

Some issue that may encountered

https://github.com/reduxjs/redux-toolkit/issues/1566