初始化与目录
1
2
3
| npx create-next-app@latest my-app --ts --eslint --app --src-dir
cd my-app
npm run dev
|
app/ 目录：基于 App Router，支持 React Server Components。app/(marketing)/、app/(app)/ 可分营销与应用区分布局。
路由与数据获取
- 服务器组件：默认 Server Component，减少前端 JS。
- 客户端组件：交互强的组件用
"use client"。 - 数据获取：
fetch + revalidate 实现 SSG/ISR；或 cache: 'no-store' 纯 SSR。 - 元数据/SEO：在
app/layout.tsx 或页面导出 metadata。
样式与资源
- 全局样式放
app/globals.css；组件级用 CSS Modules 或 Tailwind。 - 图片优化：
next/image，设置 sizes 与占位符，降低 LCP。 - 字体：
next/font 内置托管，避免 FOUT/FOIT。
API 与边缘
- Route Handlers：
app/api/.../route.ts 提供 API，可跑在 Edge Functions。 - 中间件：
middleware.ts 做重定向/鉴权。 - Cache 控制：
revalidate/force-cache/no-store 按页面需求设置。
性能与体验
- Core Web Vitals：减少客户端 bundle，按需分块，延迟加载重脚本。
- 预取：默认 Link 预取；大流量站可按需关闭/启用。
- 分析：接入 Vercel Analytics 或自建 Web Vitals 上报。
部署
Docker 自托管
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| FROM node:22-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM node:22-alpine
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY package*.json ./
RUN npm ci --omit=dev
EXPOSE 3000
CMD ["npm","run","start"]
|
边缘/无服务器
- Vercel 原生支持；Cloudflare Pages/Workers + Miniflare 也可（需适配中间件与 Edge Runtime）。
- 环境变量通过托管平台面板设置，密钥不进仓库。
安全与配置
- 环境变量区分前后缀：
NEXT_PUBLIC_ 暴露到客户端，其余仅服务器可见。 - CSP/Headers：在
next.config.js 自定义安全头；可启用 images.remotePatterns 控制外链。 - Auth：可接入 NextAuth.js / Auth.js，或自建 JWT/Session。
总结
Next.js 14 让 SSR/SSG/ISR 与 React Server Components 融合。关注：数据获取策略、客户端与服务器组件分层、核心性能优化、部署渠道（Docker/边缘），即可稳定上线可扩展的前端应用。***
