🚀 Next.js 全栈开发实践指南

一、什么是 Next.js ？

Next.js 是由 Vercel 推出的 React 全栈框架，基于 React 构建。

它解决的不是“如何写组件”，而是：

如何构建一个可上线、可扩展的完整 Web 应用

一句话总结：

Next.js = React + 服务端能力 + 工程化 + 部署方案

二、为什么选择 Next.js？

传统 React 项目（Vite / CRA）：

• 只负责前端渲染（CSR）
• SEO 差
• 需要额外后端（Express / Nest）
• 工程拆分复杂

Next.js 的优势：

• ✅ SSR / SSG 提升性能和 SEO
• ✅ 内置 API（直接写后端逻辑）
• ✅ 文件路由（零配置）
• ✅ 一体化开发体验（前后端同仓库）

👉 对全栈开发来说，非常关键的一点：

你可以把“前端 + BFF 层”写在一个项目里

三、核心架构

1️⃣ App Router

目录结构：

app/
  page.tsx
  layout.tsx
  blog/
    page.tsx
  api/
    user/
      route.ts

特点：

• 基于文件的路由
• 支持嵌套 Layout
• 默认 Server Component

2️⃣ Server Component vs Client Component

// 默认是 Server Component
export default async function Page() {
  const data = await fetch("https://api.xxx.com")
  return <div>{data}</div>
}

👉 优点：

• 不占用浏览器 JS
• 更快首屏
• 更适合数据获取

如果需要交互：

"use client"

export default function Button() {
  return <button onClick={() => alert(1)}>Click</button>
}

3️⃣ 渲染模式

✅ SSR（服务端渲染）

• 每次请求执行
• 适合动态数据

✅ SSG（静态生成）

• 构建时生成
• 适合博客、官网

✅ ISR（增量更新）

export const revalidate = 60

👉 页面每 60 秒自动更新

四、全栈能力

1️⃣ API Routes

// app/api/user/route.ts
export async function GET() {
  return Response.json({ name: "Next.js" })
}

👉 你可以：

• 接数据库
• 做鉴权
• 写业务逻辑

2️⃣ 典型架构

[ Browser ]
     ↓
[ Next.js (BFF层) ]
     ↓
[ 后端服务 / 数据库 ]

👉 Next.js 作为：

BFF（Backend For Frontend）

优点：

• 前端不直接暴露后端接口
• 更安全
• 更易聚合多个服务

3️⃣ 登录鉴权

推荐方案：

• Cookie + Session（简单）
• JWT（适合前后端分离）

可以结合：

• middleware.ts 做权限控制
• API Route 做登录逻辑

五、开发流程（标准）

1️⃣ 开发

npm run dev

特点：

• 热更新
• 调试方便

2️⃣ 构建

npm run build

👉 生成 .next（生产代码）

3️⃣ 生产运行

npm run start

👉 实际运行的是：

next start

六、生产部署

✅ 使用 PM2 管理

pm2 start npm --name "next-app" -- start

✅ 标准更新流程

git pull origin main
npm install
npm run build
pm2 restart next-app

✅ 推荐 PM2 配置

module.exports = {
  apps: [
    {
      name: "next-app",
      script: "npm",
      args: "start",
      env: {
        NODE_ENV: "production"
      }
    }
  ]
}

✅ 零停机更新

pm2 reload next-app

七、性能优化实践

1️⃣ 减少 Client Component

👉 原则：

能在服务端做的，不要放客户端

2️⃣ 使用缓存

fetch(url, { cache: "force-cache" })

或：

export const revalidate = 60

3️⃣ 图片优化

import Image from "next/image"

4️⃣ 分析内存问题

Next.js 占用高的原因：

• SSR 运行在 Node
• Server Component 执行逻辑
• 多页面缓存

👉 优化方向：

• 减少不必要 SSR
• 控制数据请求
• 使用缓存策略

八、适用场景

Next.js 非常适合：

• 📰 博客 / 内容站
• 🛒 电商平台
• 📊 管理后台（配合 CSR）
• 🌐 SEO 站点
• 🧩 全栈应用

九、优缺点分析

✅ 优点

• 一体化开发体验
• SEO 强
• 性能好（SSR / SSG）
• 生态成熟

❌ 缺点

• 学习成本（RSC 概念复杂）
• 调试难度提升
• Node 内存占用高
• 前后端边界不清晰（容易写乱）

十、总结

Next.js 的本质，是把 React 从“前端库”升级为“全栈框架”。

它解决的是：

• 如何更快渲染页面
• 如何统一前后端开发
• 如何更容易上线一个产品

如果你是：

• 正在使用 React
• 想做 SEO 站点
• 或希望快速构建一个完整产品

那么 Next.js 是目前最值得投入的技术方案之一。