react-ai-renderer 0.1.10 → 0.1.13

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
@@ -85,6 +68,9 @@ npm install mermaid
 
 ## 🎯 快速开始
 
+> 💡 **开发调试？** 查看 [开发模式使用指南](./DEVELOPMENT.md) 了解如何在本地开发和调试本库。  
+> 🔥 **使用监听模式开发？** 运行 `npm run watch` 启动自动监听和重新构建，修改代码后自动更新！
+
 ### 基础使用
 
 ```tsx
@@ -327,6 +313,52 @@ graph TD
 4. Component Renderer 渲染自定义 UI 组件
 5. 触发生命周期钩子，执行后续动作
 
+## 🔧 Next.js 集成
+
+本库已完全兼容 Next.js 的服务器端渲染（SSR）。
+
+### 在 Next.js 中使用
+
+```tsx
+// app/your-page/page.tsx 或 pages/your-page.tsx
+import ReactAIRenderer from 'react-ai-renderer';
+
+export default function YourPage() {
+  const content = `
+# 你好，Next.js!
+
+这是一个在 Next.js 中使用 React AI Renderer 的示例。
+  `;
+  
+  return (
+    <div>
+      <ReactAIRenderer>{content}</ReactAIRenderer>
+    </div>
+  );
+}
+```
+
+### 需要客户端组件的场景
+
+如果需要在 Next.js 13+ 的 App Router 中使用交互式组件（如按钮点击等），需要使用 `'use client'` 指令：
+
+```tsx
+// app/your-page/client-renderer.tsx
+'use client';
+
+import ReactAIRenderer from 'react-ai-renderer';
+
+export default function ClientAIRenderer({ content }: { content: string }) {
+  return <ReactAIRenderer>{content}</ReactAIRenderer>;
+}
+```
+
+### 注意事项
+
+- ✅ 本库已添加 SSR 安全检查，不会在服务器端访问 `document` 或 `window` 对象
+- ✅ 可以在服务器端安全使用，无需额外配置
+- ✅ 动态功能（如 Mermaid 图表）会自动在客户端渲染
+
 ## ❓ 常见问题
 
 ### Q: React AI Renderer 与 react-markdown 有什么区别？
@@ -338,6 +370,9 @@ A: 未注册的组件会自动转换为对应的文本表示形式，不会导
 ### Q: 是否支持不同组件库如antd,shadcn等
 A: 是的，React AI Renderer 无组件依赖，你可以使用任意组件库以及自定义组件
 
+### Q: 在 Next.js 中出现 "document is not defined" 错误怎么办？
+A: 请确保使用最新版本（v0.1.12+），该版本已完全修复 SSR 兼容性问题。如果仍有问题，请检查是否正确安装了依赖并清理 Next.js 缓存。
+
 ### Q: 性能如何优化？
 A: 建议合理使用组件生命周期钩子，避免在渲染过程中执行耗时操作。