Next.js 15 error 与 not-found 状态治理与 RSC 兼容实践

核心价值`error` 捕获渲染与数据获取异常，并提供 `reset` 恢复路径。`not-found` 统一 404 呈现，与 `notFound()` 触发配合，保持导航一致性。error 组件// app/posts/error.tsx

'use client'

export default function Error({ error, reset }: { error: Error; reset: () => void }) {

return (

<div role="alert">

<h2>发生错误</h2>

<pre>{error.message}</pre>

<button onClick={() => reset()}>重试</button>

</div>

)

}

not-found 组件与触发// app/posts/not-found.tsx

export default function NotFound() {

return <h2>内容不存在</h2>

}

// app/posts/[id]/page.tsx

import { notFound } from 'next/navigation'

export default async function Page({ params }: { params: { id: string } }) {

const post = await fetch(`https://api.example.com/posts/${params.id}`).then(r => r.ok ? r.json() : null)

if (!post) notFound()

return <article><h1>{post.title}</h1></article>

}

治理建议对 404/410 等状态使用 `notFound()` 而非抛错，避免混淆错误类型。在路由层保持错误与未找到的清晰边界，并记录必要日志以便排查。结论`error` 与 `not-found` 提供清晰的状态治理模型，配合 RSC 渲染与导航可在异常与缺失场景下保持体验可控与一致。