nextjs15-performance

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Before writing Next.js code

编写Next.js代码之前

Read

docs/agent/architecture/nextjs-critical-fixes.md

for full patterns

Check existing components in
```
apps/frontend/components/
```
for examples

阅读

docs/agent/architecture/nextjs-critical-fixes.md

获取完整模式

查看
```
apps/frontend/components/
```
中的现有组件作为示例

Critical Rules (always apply)

关键规则（必须遵守）

Waterfalls

请求瀑布问题

Use
```
Promise.all()
```
for independent fetches
Wrap slow data in
```
<Suspense>
```
boundaries
Defer
```
await
```
into branches where needed

对独立的请求使用
```
Promise.all()
```
将慢数据请求包裹在
```
<Suspense>
```
边界中
在需要的分支中延迟使用
```
await
```

Bundle Size

包体积优化

NO barrel imports:
```
import X from 'lucide-react'
```
❌

YES direct imports:

import X from 'lucide-react/dist/esm/icons/x'

✅

Use
```
next/dynamic
```
for heavy components (editors, charts, PDF viewers)
Defer analytics with
```
ssr: false
```

禁止桶导入：
```
import X from 'lucide-react'
```
❌

推荐直接导入：

import X from 'lucide-react/dist/esm/icons/x'

✅

对重型组件（编辑器、图表、PDF查看器）使用
```
next/dynamic
```
通过
```
ssr: false
```
延迟分析脚本加载

Server Actions

Server Actions 规范

ALWAYS check auth INSIDE the action, not just middleware
Verify resource ownership before mutations

必须在Action内部检查权限，而不仅仅是在中间件中
在执行变更操作前验证资源所有权

Production Build

生产构建要求

Users run

npm run build && npm run start

, NOT

npm run dev

Docker must use standalone output, not dev mode

用户需运行

npm run build && npm run start

，而非

npm run dev

Docker必须使用独立输出模式，而非开发模式

Quick Check Before PR

PR前快速检查清单

[ ] No sequential awaits for independent data
[ ] Icons imported directly
[ ] Heavy components use next/dynamic
[ ] Server Actions have auth inside
[ ] Suspense around slow fetches

[ ] No sequential awaits for independent data
[ ] Icons imported directly
[ ] Heavy components use next/dynamic
[ ] Server Actions have auth inside
[ ] Suspense around slow fetches