Next.js 速查
共 19 条 Next.js 常用写法与命令，涵盖路由与页面、数据获取与渲染、API 与服务端、命令与配置。 支持搜索与分类筛选，点击即可复制。
路由与页面
App Router 以目录结构定义路由。
| 命令 | 说明 |
|---|---|
| 首页 / 对应 URL 的页面组件 | |
| 布局（包裹该目录下所有页面） | |
| 动态路由（params.slug） | |
| 分组路由（括号目录不进 URL） | |
| 客户端导航（next/link） |
数据获取与渲染
默认服务端组件，可请求时再取数。
| 命令 | 说明 |
|---|---|
| 服务端组件里直接 await 取数 | |
| 不缓存（每次请求都取） | |
| ISR：每 60 秒重新生成 | |
| 声明客户端组件（可用 hooks 与浏览器 API） | |
| 动态路由的静态生成参数 |
API 与服务端
Route Handler 定义接口。
| 命令 | 说明 |
|---|---|
| 接口路由文件 | |
| 定义 GET（POST / PUT / DELETE 同理） | |
| 读取请求体 | |
| 服务端操作（表单提交等） |
命令与配置
构建、运行与常用组件。
| 命令 | 说明 |
|---|---|
| 创建项目 | |
| 开发 / 构建 / 生产启动 | |
| 常用配置（图片域、rewrites） | |
| 优化图片（next/image） | |
| NEXT_PUBLIC_ 前缀才会暴露到客户端 |
使用说明
Next.js 速查：路由与页面（App Router）、数据获取与渲染（服务端组件与缓存）、API 与服务端（Route Handler）、命令与配置；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：路由与页面、数据获取与渲染、API 与服务端、命令与配置。
- 点「命令」列复制，替换成自己的命名后使用。
- App Router 里目录结构即路由：app/page.tsx 对应 /，[slug] 为动态段。
- 默认是服务端组件，需要 hooks 或浏览器 API 时在文件顶部加 use client。
常见问题
- App Router 和 Pages Router 什么区别？
- App Router（app/ 目录）是新一代路由，默认服务端组件、支持 layout 嵌套与流式渲染；Pages Router（pages/ 目录）是旧方案，仍可用但新项目建议 App Router。
- 怎么选 SSG / SSR / ISR？
- 内容固定用静态生成；每次请求都要最新数据用动态渲染（cache: no-store）；介于两者用 ISR（export const revalidate = 60）。
- 需要联网吗？
- 不需要，速查内容在构建时静态渲染，本地即可检索复制。