react-ai-renderer 0.1.10 → 0.1.11

package/README.md

@@ -58,23 +58,6 @@ yarn add react-ai-renderer
 
 ### 可选依赖
 
-#### 1. KaTeX（数学公式渲染）
-
-本库支持使用 KaTeX 渲染数学公式，但需要在你的项目中手动导入 CSS：
-
-**在 _app.tsx 或全局样式文件中添加：**
-```tsx
-import 'katex/dist/katex.min.css';
-```
-
-**Next.js 项目中：**
-```tsx
-// pages/_app.tsx 或 app/layout.tsx
-import 'katex/dist/katex.min.css';
-```
-
-#### 2. Mermaid（图表渲染）
-
 本库支持渲染 Mermaid 图表，但需要安装额外的依赖：
 
 ```bash
@@ -327,6 +310,63 @@ graph TD
 4. Component Renderer 渲染自定义 UI 组件
 5. 触发生命周期钩子，执行后续动作
 
+## ⚠️ Next.js 使用注意事项
+
+本库已针对 Next.js 的服务端渲染（SSR）进行了优化。在使用时需要注意：
+
+### 动态导入以避免 SSR 问题
+
+对于包含复杂渲染逻辑的页面，建议使用动态导入（仅在客户端加载）：
+
+```tsx
+import dynamic from 'next/dynamic';
+
+const ReactAIRenderer = dynamic(() => import('react-ai-renderer'), {
+  ssr: false, // 禁用服务端渲染
+  loading: () => <div>加载中...</div>
+});
+```
+
+### 或者使用 NoSSR 包装器
+
+```tsx
+import dynamic from 'next/dynamic';
+
+const ReactAIRenderer = dynamic(() => import('react-ai-renderer'), {
+  ssr: false
+});
+
+function App() {
+  return (
+    <ReactAIRenderer>
+      {content}
+    </ReactAIRenderer>
+  );
+}
+
+export default dynamic(() => Promise.resolve(App), {
+  ssr: false
+});
+```
+
+### Next.js 客户端组件（推荐）
+
+使用 Next.js 13+ 的 App Router 时，确保使用 'use client' 指令：
+
+```tsx
+'use client';
+
+import ReactAIRenderer from 'react-ai-renderer';
+
+export default function MyPage() {
+  return (
+    <ReactAIRenderer>
+      {content}
+    </ReactAIRenderer>
+  );
+}
+```
+
 ## ❓ 常见问题
 
 ### Q: React AI Renderer 与 react-markdown 有什么区别？
@@ -338,6 +378,9 @@ A: 未注册的组件会自动转换为对应的文本表示形式，不会导
 ### Q: 是否支持不同组件库如antd,shadcn等
 A: 是的，React AI Renderer 无组件依赖，你可以使用任意组件库以及自定义组件
 
+### Q: 在 Next.js 中使用时遇到 "document is not defined" 错误？
+A: 使用动态导入（`dynamic import`）或 `'use client'` 指令来确保组件只在客户端渲染。
+
 ### Q: 性能如何优化？
 A: 建议合理使用组件生命周期钩子，避免在渲染过程中执行耗时操作。