Next.js 速查表 - Next.js 框架常用方法大全
Next.js 全栈 React 框架的必备 API 都在这里了，从路由到数据获取、从渲染策略到中间件，按功能分类整理，写代码时直接复制。
返回 Web 服务App Router 基础 5
app/page.tsx页面组件，默认是服务端组件（Server Component）
app/layout.tsx根布局或嵌套布局，包裹子页面
app/loading.tsx加载状态 UI，配合 Suspense 自动显示
app/error.tsx错误边界 UI，捕获子组件运行时错误
app/not-found.tsx404 页面，找不到路由时显示
路由与导航 6
useRouter()客户端路由跳转 Hook，来自 next/navigation
<Link href="/about">客户端导航组件，自动预取可见链接
usePathname()获取当前路径名，客户端路由监听用
useSearchParams()获取 URL 查询参数 Hook
app/blog/[slug]/page.tsx动态路由，[slug] 是参数占位符
app/(marketing)/about/page.tsx路由组，不影响 URL 路径
数据获取 6
fetch(url, { cache: "force-cache" })静态数据获取，默认缓存策略
fetch(url, { cache: "no-store" })动态数据获取，每次请求重新拉取
fetch(url, { next: { revalidate: 60 } })ISR 增量静态生成，60 秒后重新验证
generateStaticParams()静态生成动态路由的路径参数列表
"use server"标记服务端 Action，在客户端表单中调用
server-only确保代码只在服务端运行，不会泄漏到客户端
渲染策略 5
export const dynamic = "force-static"强制静态渲染，构建时生成 HTML
export const dynamic = "force-dynamic"强制动态渲染，每次请求实时生成
export const revalidate = 3600页面级 ISR 间隔，单位秒
"use client"标记为客户端组件，使用浏览器 API 和交互
export const runtime = "edge"使用 Edge Runtime 运行，延迟更低
布局与模板 5
export const metadata = { title: "页面标题" }静态元数据，支持 title/description/OG 等
export async function generateMetadata()动态生成元数据，接收 params 和 searchParams
app/@modal/default.tsx平行路由插槽，独立渲染区域
app/(...)/[...slug]/page.tsx拦截路由，在当前布局中拦截外部链接
template.tsx模板组件，类似 layout 但切换时重新挂载
API 与中间件 6
app/api/route.tsRoute Handler，创建 API 端点
export async function GET(request)处理 GET 请求的 Route Handler
middleware.ts中间件文件，在请求前执行路由判断
NextResponse.redirect(new URL("/login", request.url))中间件中重定向请求
NextResponse.next()中间件中继续处理请求
cookies().get("token")服务端读取 Cookie
静态资源与优化 5
import Image from "next/image"优化图片组件，支持懒加载和 WebP 自动转换
import { Inter } from "next/font/google"Google 字体优化，自托管避免外部请求
import Script from "next/script"脚本加载优化，支持 afterInteractive/lazyOnload 策略
export const metadata = { robots: { index: true, follow: true } }SEO 爬虫配置
<Link href="/about" prefetch={true}>Link 自动预取，hover 时加载页面资源
部署与配置 5
output: "standalone"独立部署输出，包含所需依赖，适合 Docker 部署
output: "export"静态导出为纯 HTML/CSS/JS，可部署到任何静态托管
process.env.NEXT_PUBLIC_API_URL客户端环境变量，以 NEXT_PUBLIC_ 前缀暴露
next build生产构建，生成优化后的代码和静态资源
next start启动生产服务器，读取 .next 目录的构建产物
💡 提示
- App Router 是 Next.js 13+ 默认路由方案，取代了 Pages Router
- 页面组件默认是服务端组件（Server Component），需要客户端交互时加 "use client"
- 使用 next/link 的 Link 组件代替 a 标签，自动预取和客户端导航
- 数据获取推荐在服务端组件中直接 async/await fetch，无需 useEffect
- 使用 generateStaticParams 实现静态生成动态路由