如何在Next.js的_app.tsx配置Redux？解决legacy实现报错

编译Next.js应用时出现以下报错：

/!\! You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore().

应用虽能正常运行，但该报错提示你正在使用next-redux-wrapper的旧版API，需升级写法以适配新版本规范。

问题根源 #

你的store.js已经正确使用了新版的createWrapper，但_app.tsx里仍在使用废弃的wrapper.withRedux(App)高阶组件写法——这是next-redux-wrapper v7+版本不再推荐的旧用法，也是触发报错的核心原因。

修复方案 #

1. 修改_app.tsx的写法

移除wrapper.withRedux高阶组件，改用wrapper.useWrappedStore获取store，并通过Redux的Provider包裹整个应用组件：

import type { AppProps } from 'next/app'
import { Toaster } from 'react-hot-toast';
import { useRouter } from 'next/router';
import { wrapper } from '../features/store';
import { Provider } from 'react-redux'; // 新增导入Provider
import useAuth from '../hooks/useAuth';
import useDarkMode from '../hooks/useDarkMode';
import '../styles/global.css';

const App = ({ Component, pageProps }: AppProps) => {
    const store = wrapper.useWrappedStore(pageProps); // 获取包装后的store
    useAuth();
    useDarkMode();
    const router = useRouter();

    return (
        <Provider store={store}> {/* 用Provider将store注入整个应用 */}
            <main>
                <Component {...pageProps} key={router.asPath} />
                <Toaster
                    position="bottom-center"
                    toastOptions={{
                        duration: 3000,
                    }}
                />
            </main>
        </Provider>
    )
};

export default App; // 直接导出App组件，不再用withRedux包装

2. 确保依赖版本正确

若你的next-redux-wrapper版本低于v7，先升级到最新版：

npm install next-redux-wrapper@latest react-redux @reduxjs/toolkit

3. 检查页面数据获取逻辑（若有）

如果你的页面中使用了getStaticProps或getServerSideProps，需改用新版的wrapper.getStaticProps/wrapper.getServerSideProps包裹逻辑，示例：

export const getServerSideProps = wrapper.getServerSideProps((store) => async (context) => {
  // 你的数据获取逻辑
  return { props: {} }
})

完成以上修改后，编译时的legacy implementation报错将消失，同时Redux仍能在Next.js应用中正常工作。

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