Redux in Next.js App Router

Integrate Redux Toolkit with Next.js App Router without leaking per-user state across requests.

40 min

2 sections

nextjs

app-router

rsc

store

01. Create a store per request boundary

Section 1 of 2

In the App Router, do not create one global store that can be shared across users on the server. Server Components should not read or write the Redux store. Put the Provider at a Client Component boundary and create the store with a ref so it is stable for that browser session.

typescript

"use client";

import { useRef, type ReactNode } from 'react';
import { Provider } from 'react-redux';
import { makeStore, type AppStore } from './store';

export function StoreProvider({ children }: { children: ReactNode }) {
  const storeRef = useRef<AppStore | null>(null);

  if (!storeRef.current) {
    storeRef.current = makeStore();
  }

  return <Provider store={storeRef.current}>{children}</Provider>;
}

Entity Adapter for Enterprise State

RTK Query Lifecycle and Streaming

Back to Course