Back to Details

modern-best-practice-nextjs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Next.js Best Practices (App Router)

Next.js 最佳实践（App Router）

Next.js is a library that changes frequently - use web search or context7 MCP (via DocsExplorer agent) for exploring the current documentation.

Next.js是一个更新频繁的库——可通过网页搜索或context7 MCP（借助DocsExplorer agent）查阅最新文档。

Routing & Structure

路由与结构

Use the App Router in
```
app/
```
for new work
Use nested layouts and route groups to organize sections
Keep server components as the default; add
```
'use client'
```
only where needed

新开发项目使用
```
app/
```
目录下的App Router
使用嵌套布局和路由组来组织模块
默认使用Server Components；仅在必要时添加
```
'use client'
```
指令

Data Fetching & Caching

数据获取与缓存

Fetch data in React Server Components - AVOID fetching via
```
useEffect()
```
and
```
fetch()
```
Use server actions ("Server Functions") for mutations, potentially in conjunction with React Hooks like
```
useActionState
```

在React Server Components中获取数据——避免通过
```
useEffect()
```
和
```
fetch()
```
获取数据
使用Server Actions（“服务器函数”）处理数据变更，可结合
```
useActionState
```
等React Hooks使用

UI States

UI状态

Provide
```
loading.tsx
```
and
```
error.tsx
```
for route-level UX
Use
```
Suspense
```
boundaries around async UI

为路由级别的用户体验提供
```
loading.tsx
```
和
```
error.tsx
```
文件
在异步UI周围使用
```
Suspense
```
边界

Metadata & SEO

元数据与SEO

Use the Metadata API in layouts and pages
Prefer static metadata when possible; keep dynamic metadata minimal

在布局和页面中使用Metadata API
尽可能优先使用静态元数据；尽量减少动态元数据的使用