Next.js 全栈开发入门：从前端到后端的一站式体验

发布于 2025-12-01 | 作者：水码 | 阅读约 8 分钟

Next.js 作为 React 生态中最流行的全栈框架，凭借其“约定优于配置”的理念与开箱即用的服务端渲染（SSR）、静态生成（SSG）、API 路由等功能，已成为构建现代 Web 应用的首选工具之一。本文将带你快速入门 Next.js 全栈开发，理解其核心能力，并动手搭建一个简单的“待办事项（Todo）”应用。

一、为什么选择 Next.js 做全栈？

传统 React 应用通常只负责前端渲染，后端需另起服务（如 Express、NestJS）。而 Next.js 通过以下特性实现真正“全栈一体化”：

API Routes：在 pages/api 下直接编写后端接口，无需额外服务；
服务端组件（App Router）：支持在组件中直接调用数据库、第三方 API，数据获取与 UI 渲染同构；
中间件（Middleware）：统一处理鉴权、重定向、A/B 测试等逻辑；
自动代码分割与优化：生产环境自动优化资源加载。

二、环境准备

确保已安装 Node.js（≥18.17）和 npm/yarn/pnpm：

npx create-next-app@latest my-todo-app
        # 交互式配置中推荐选择：
        # ✔ Use App Router (recommended)
        # ✔ Customize with my preferences
        #     → Tailwind CSS: Yes
        #     → src directory: Yes
        #     → App Router: Yes
        #     → ESLint: Yes
        #     → TypeScript: Yes（推荐）

三、核心概念实践

1. 页面路由（App Router）

Next.js 13+ 默认使用 app 目录路由系统。创建页面只需新建文件夹与 page.tsx：

src/
        └── app/
            ├── layout.tsx        // 根布局（含 <html>、<body>）
            ├── page.tsx          // 首页 → /
            └── todos/
                └── page.tsx      // → /todos

2. 服务端组件与数据获取

在 app/todos/page.tsx 中，我们可直接在组件内调用异步函数获取数据（仅在服务端执行）：

// src/app/todos/page.tsx
        import { getTodos } from '@/lib/data'; // 假设的数据层
        
        export default async function TodoPage() {
          const todos = await getTodos(); // 直接 await，无 useEffect！
        
          return (
            <div className="space-y-4">
              {todos.map(todo => (
                <div key={todo.id} className="p-4 border rounded">
                  {todo.title}
                </div>
              ))}
            </div>
          );
        }

✅ 优势：数据预加载、SEO 友好、无客户端水合闪烁。

3. 创建 API 接口（全栈关键！）

在 src/app/api/todos/route.ts 中定义 RESTful 接口：

// src/app/api/todos/route.ts
        import { NextRequest, NextResponse } from 'next/server';
        import { createTodo, getAllTodos } from '@/lib/data';
        
        export async function GET() {
          const todos = await getAllTodos();
          return NextResponse.json(todos);
        }
        
        export async function POST(req: NextRequest) {
          const { title } = await req.json();
          const newTodo = await createTodo(title);
          return NextResponse.json(newTodo, { status: 201 });
        }

⚠️ 注意：App Router 下 API 路由使用 route.ts + HTTP 方法函数，而非旧版 pages/api。

4. 客户端交互：use client 与 Action

对于需要状态管理或事件绑定的组件，需声明 'use client'。更推荐使用 Server Actions（实验性但强大）直接从前端调用服务端函数：

// src/app/todos/actions.ts
        'use server';
        
        import { createTodo } from '@/lib/data';
        
        export async function addTodo(formData: FormData) {
          const title = formData.get('title') as string;
          await createTodo(title);
        }

// src/app/todos/page.tsx（客户端部分）
        'use client';
        
        import { addTodo } from './actions';
        
        export default function TodoForm() {
          return (
            <form action={addTodo} className="flex gap-2">
              <input name="title" className="border px-2 py-1" />
              <button type="submit" className="bg-blue-500 text-white px-4 py-1 rounded">
                添加
              </button>
            </form>
          );
        }

✨ Server Actions 自动处理 CSRF 防护、序列化、错误边界，极大简化全栈交互。

四、数据层建议

Next.js 不强制数据库，推荐组合：

本地开发：使用 drizzle-orm + SQLite（轻量、零配置）；
生产环境：Vercel Postgres / Supabase / Planetscale（MySQL兼容）；
无服务器数据库：Upstash Redis / DynamoDB。

五、部署：一键上线

Next.js 与 Vercel 深度集成，只需：

将代码推送到 GitHub 仓库；
在 Vercel 导入项目；
自动检测 Next.js，完成构建与全球 CDN 分发。

支持环境变量、预览部署、边缘函数等企业级功能。

六、学习资源

官方文档：nextjs.org/docs（必读！）
实战教程：Next.js Learn
社区模板：nextjs-subscription-payments（含 Stripe 支付）

Next.js 的全栈能力正在重塑前端开发边界——你不再需要在“前端工程师”和“后端工程师”之间做选择。掌握它，你就拥有了构建高性能、SEO 友好、可维护现代应用的完整武器库。

动手试试吧！源码示例已上传至：github.com/shuicode/nextjs-todo-demo