以下是正文

一、背景

BDI 官网基于 Next.js 16.1.6 + React 19.2.4 + Nextra v4.6.1 构建，经过前几轮的功能迭代和 bug 修复后，本轮对全量代码进行深度审计，目标是确保项目符合 Next.js v16 latest App Router 的最新最佳实践，重点关注速度和安全两个维度。

二、审计范围

本次审计覆盖约 30 个核心文件，包括：

范围	文件
配置层	`next.config.ts`、`tsconfig.json`、`biome.json`、`proxy.ts`、`package.json`
路由层	`app/layout.tsx`、`app/[locale]/layout.tsx`、`app/[locale]/page.tsx`
页面层	`blog/page.tsx`、`blog/[slug]/page.tsx`、`docs/layout.tsx`、`docs/page.tsx`
组件层	`site-header.tsx`、`site-footer.tsx`、`hero-section.tsx`、`language-switcher.tsx` 等
数据层	`lib/actions/blog.ts`、`lib/db.ts`、`i18n/`、`dictionaries/`
错误处理	`global-error.tsx`、`not-found.tsx`

三、安全维度

3.1 Server Actions 缺乏速率限制（已修复）

问题：toggleReaction 和 submitComment 两个 Server Action 直接接受请求并写入数据库，没有任何频率限制。恶意用户可以通过大量请求造成数据库压力。

修复方案：实现基于 IP 的滑动窗口速率限制器：

const rateMap = new Map<string, { count: number; resetAt: number }>();
 
function isRateLimited(ip: string, action: string, maxRequests: number, windowMs: number): boolean {
  const key = `${ip}:${action}`;
  const now = Date.now();
  const record = rateMap.get(key);
  if (!record || now > record.resetAt) {
    rateMap.set(key, { count: 1, resetAt: now + windowMs });
    return false;
  }
  record.count++;
  return record.count > maxRequests;
}

toggleReaction：30 次/分钟/IP
submitComment：5 次/分钟/IP

3.2 缺少路由级错误边界（已修复）

问题：项目仅有 global-error.tsx 作为全局兜底，缺少 [locale]/error.tsx 路由级错误边界。一旦某个页面组件抛出异常，整个应用会 fallback 到全局错误页面，用户体验较差。

修复方案：创建 app/[locale]/error.tsx，提供双语错误信息（中/英），包含重试按钮和返回首页链接，并显示错误摘要（digest）便于排查。

四、速度维度

4.1 not-found.tsx 不必要的客户端渲染（已修复）

问题：app/[locale]/not-found.tsx 使用 "use client" 指令，通过 useParams() 获取 locale、通过 useDictionary() 获取翻译。这导致 404 页面需要下载额外的客户端 JavaScript 并进行水合（hydration），增加了无谓的加载时间。

修复方案：转换为 Server Component，使用 i18n.defaultLocale 和 getDictionary() 直接在服务端获取数据：

export default async function NotFound() {
  const locale = i18n.defaultLocale;
  const dict = await getDictionary(locale as Locale);
  // ...渲染 JSX
}

收益：减少客户端 JS 体积，404 页面完全由服务端渲染，首屏更快。

4.2 头像图片优化评估（保留 unoptimized）

调查：博客列表页和详情页的作者头像 <Image> 组件使用了 unoptimized 属性。审计初期尝试移除该属性，但验证发现 Next.js Image Optimization Proxy 请求 i.pravatar.cc 时返回 403 Forbidden——该第三方服务拒绝非浏览器来源的请求。

结论：对于会拒绝代理请求的第三方图片服务，unoptimized 是正确的选择。头像图片本身体积很小（32×32 / 48×48），跳过优化带来的性能损失可忽略不计。此项不做修改。

4.3 缺少 loading.tsx 骨架屏（已修复）

问题：仅 blog/[slug] 有 loading.tsx，博客列表页和文档页缺少加载状态。当页面需要较长时间渲染时，用户只能看到空白页面。

修复方案：为以下路由添加骨架屏：

app/[locale]/blog/loading.tsx：6 张卡片骨架的网格布局
app/[locale]/docs/[[...mdxPath]]/loading.tsx：文档内容区域的文本骨架

收益：利用 React Suspense 机制，在服务端渲染完成前即刻展示骨架屏，显著改善感知性能。

五、其他发现

5.1 SQLite ExperimentalWarning（已修复）

问题：Node.js 的 node:sqlite 模块仍然是实验性 API，每次构建和运行时都会输出 ExperimentalWarning。之前在 next.config.ts 中用 process.emitWarning 猴补丁无法覆盖构建 worker 进程。

修复方案：在 .npmrc 中设置 node-options=--disable-warning=ExperimentalWarning，所有通过 pnpm 启动的 Node.js 进程（包括构建 worker）都会静默该警告。

5.2 Sticky 侧边栏滚动偏移（已修复）

独立文章已详细记录：修复侧边栏 Sticky 滚动问题。

核心方案：在 xl+ 断点使用 display: contents 展平嵌套 Flex 层级，使 sticky 元素直接成为外层 Flex 容器的子元素。

六、审计结论

维度	发现	已修复	状态
安全	Server Actions 无速率限制	滑动窗口限流	✅
安全	缺少路由级错误边界	`[locale]/error.tsx`	✅
速度	not-found 不必要客户端渲染	转 Server Component	✅
速度	头像图片 `unoptimized`	评估后保留（第三方服务拒绝代理）	ℹ️
速度	缺少 loading.tsx 骨架屏	博客列表 + 文档页	✅
其他	SQLite 警告	`.npmrc` node-options	✅
其他	Sticky 侧边栏偏移	`xl:contents` 展平	✅

全部高优先级问题已在本轮修复，项目在速度和安全方面符合 Next.js v16 App Router 的最新最佳实践标准。

版本: 1.0.1 时间: 2026-02-19 16:10:00 作者: Claude Opus 4.6 简介: 对 BDI 官网全量代码进行深度审计，聚焦速度与安全，识别并修复 7 项关键问题