Next.js 流式 Markdown 渲染器

markstream-react 在 Next.js 中有三种常见入口：实时 SSE/WebSocket 区域用 root markstream-react 放在 'use client' 组件里；需要服务器先输出 HTML 再增强时用 markstream-react/next；完全 server-only 的 Markdown 预览用 markstream-react/server。

// app/components/ChatMessage.tsx
'use client'

import MarkdownRender from 'markstream-react'

export function ChatMessage({ content, isDone }: { content: string, isDone: boolean }) {
  return <MarkdownRender content={content} final={isDone} fade={false} />
}

// app/page.tsx
import MarkdownRender from 'markstream-react/next'
import 'markstream-react/index.css'

export default function Page() {
  return <MarkdownRender content="# Server HTML first" final />
}

入口	用途
markstream-react	client component 中的实时流式输出
markstream-react/next	SSR-first 页面，服务端 HTML + 客户端增强
markstream-react/server	不需要客户端增强的 server-only 渲染

不要把 Next.js 简化成“只能 client-only”。只有 live streaming surface 必须在客户端；稳定内容和服务端预览可以走 SSR-first 或 server-only。