如何在Next.js中使用react-redux的Provider且不借助next-redux-wrapper

适配App Router（Next.js 13+ 版本） #

• 放置位置：app/layout.tsx（项目根布局文件），该文件默认作用于所有路由页面，全局只需要配置一次
• 实现代码：

'use client' // 必须添加该指令，标记根布局为客户端组件以支持React上下文特性
import { Provider } from 'react-redux'
import store from './你的store文件路径'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <body>
        <Provider store={store}>
          {children}
        </Provider>
      </body>
    </html>
  )
}

适配Pages Router（Next.js 12及更早版本，或使用pages目录的项目） #

• 放置位置：pages/_app.tsx（自定义App组件），该组件是所有页面的公共父组件，配置后全局生效
• 实现代码：

import type { AppProps } from 'next/app'
import { Provider } from 'react-redux'
import store from './你的store文件路径'

export default function CustomApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

配置完成后即可在所有组件中正常使用useDispatch、useSelector等react-redux提供的API，和普通React项目用法完全一致。如果项目需要支持SSR/SSG，建议封装生成store实例的函数而非直接导出单例store，避免不同请求之间的数据污染。

内容的提问来源于stack exchange，提问作者mostafa faryabi