在Next.js应用目录架构中配置React Aria SSRProvider遇问题

核心结论 #

React Aria的SSRProvider和I18nProvider都需要标记为客户端组件，同时需要解决@swc/helpers的依赖缺失问题。

分步配置 #

1. 创建客户端专属的提供者组件
   在项目的app目录下新建文件（比如providers.tsx），顶部必须添加'use client'指令，然后导入并包裹两个Provider：

   'use client';
   
   import { SSRProvider } from '@react-aria/ssr';
   import { I18nProvider } from '@react-aria/i18n';
   // 替换为你的本地化配置，比如定义默认语言
   const defaultLocale = {
     locale: 'en-US',
     // 可添加本地化相关的格式化配置
   };
   
   export function ReactAriaProviders({ children }: { children: React.ReactNode }) {
     return (
       <SSRProvider>
         <I18nProvider locale={defaultLocale}>
           {children}
         </I18nProvider>
       </SSRProvider>
     );
   }
   

2. 在根布局中引入提供者
   在app/layout.tsx中导入上述组件，根布局无需添加'use client'，直接渲染客户端组件即可：

   import { ReactAriaProviders } from './providers';
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <body>
           <ReactAriaProviders>{children}</ReactAriaProviders>
         </body>
       </html>
     );
   }
   

3. 修复@swc/helpers依赖错误
   出现Module not found: Can't resolve '@swc/helpers/src/_class_private_field_init.mjs'是因为React Aria的部分依赖需要SWC辅助工具，执行以下命令安装依赖：

   npm install @swc/helpers
   # 或使用yarn
   yarn add @swc/helpers
   

   若安装后仍有问题，可在next.config.js中启用SWC压缩：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     swcMinify: true,
   };
   
   module.exports = nextConfig;
   

关键说明 #

• 两个Provider必须放在客户端组件中，因为它们内部使用了useEffect等客户端专属Hook，这也是前两种配置（包含服务端组件）出现useEffect报错的原因。
• @swc/helpers的缺失是React Aria适配Next.js应用目录架构时的常见问题，安装依赖后即可解决模块找不到的错误。

内容的提问来源于stack exchange，提问作者Rémi Bernard