Full-Stack Web Development

Next.js 全栈开发

The React Framework for Production

从 App Router 到 Server Actions，从 Prisma 数据库到 Auth.js 认证， 系统学习 Next.js 15 全栈开发，掌握现代 Web 应用的完整构建流程。

Next.js 15 App Router Server Components Server Actions Prisma ORM Auth.js v5 TypeScript Vercel
开始学习 → 查看目录

为什么选择 Next.js

⚡

零配置起步

内置 TypeScript、ESLint、Tailwind CSS 支持，开箱即用的生产级配置

🖥️

服务端渲染

RSC 在服务器运行，减少客户端 JavaScript，提升首屏性能和 SEO

📁

文件系统路由

基于文件夹的路由约定，无需手动配置，天然支持嵌套布局

🔄

全栈一体化

Server Actions 让前端直接调用数据库，彻底简化全栈开发流程

🚀

极致性能优化

自动图片优化、字体内联、代码分割、预渲染等，内置性能最佳实践

🌍

边缘部署

与 Vercel 深度集成，支持 Edge Runtime，全球 CDN 毫秒级响应

课程目录 · 10章

01
Next.js 与 App Router 架构
Next.js 15 介绍、文件系统路由、App Router vs Pages Router 本质区别
›
02
路由系统深度解析
嵌套路由、动态路由 [slug]、路由组 (group)、平行路由、拦截路由
›
03
Server Components 原理
RSC 工作原理、'use client' / 'use server'、服务端/客户端边界、Hydration
›
04
数据获取与缓存
fetch 缓存扩展、revalidate、unstable_cache、loading.tsx、Suspense 边界
›
05
Server Actions 与表单
表单处理、useFormStatus、useOptimistic 乐观更新、错误处理
›
06
数据库集成 Prisma ORM
Prisma schema 定义、migrate、CRUD 操作、关系查询、连接池
›
07
认证系统 Auth.js v5
OAuth Provider、credentials、Session 策略、保护路由、middleware
›
08
API Routes 与中间件
Route Handlers、Request/Response、middleware.ts、Edge Runtime
›
09
性能优化与 SEO
next/image、next/font、Metadata API、generateStaticParams、Bundle 分析
›
10
实战：全栈 Blog 平台
整合所有知识点，实现文章 CRUD、用户认证、评论系统、部署到 Vercel
›

学习目标

📐

理解架构设计

深入理解 App Router 的分层架构设计，掌握 RSC 与客户端组件的边界划分

🗄️

全栈数据操作

使用 Prisma ORM 操作数据库，通过 Server Actions 实现前后端无缝数据流

🔐

生产级认证

集成 Auth.js v5 实现 OAuth 登录和 Credentials 认证，保护 API 和页面路由

📊

性能最佳实践

掌握 Next.js 内置的图片、字体、缓存优化手段，使用 Bundle 分析工具排查问题

🚢

Vercel 部署上线

从本地开发到生产部署，完整走通 Next.js 项目的 CI/CD 和部署流程

🏗️

构建真实项目

最终章实战 Blog 平台，整合认证、数据库、评论、SEO 等完整功能

前置要求

需要掌握

  • JavaScript ES6+ 基础语法
  • React 基础（组件、Props、Hooks）
  • TypeScript 基础类型系统
  • Node.js 运行环境
  • 基础 HTTP / REST API 概念

开发环境

  • Node.js 20 LTS 或更高版本
  • VS Code + ESLint 插件
  • pnpm / npm / yarn 包管理器
  • Git 版本控制工具
  • PostgreSQL 或 SQLite 数据库