react-ai-renderer 0.1.11 → 0.1.13

package/README.md

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