返回博客
全栈开发Next.jsReactTypeScriptVercel

Next.js 16 全栈开发实战：从 0 到部署

深入解析 Next.js 16 的 App Router、Server Actions、Turbopack 等新特性，手把手带你构建并部署一个全栈应用。

2025年7月10日2 min read

前言

Next.js 16 带来了诸多令人振奋的改变：Turbopack 正式稳定、React Compiler 支持、以及更完善的缓存 API。本文将从零开始，带你完整走一遍开发到部署的流程。

环境准备

pnpm create next-app@latest my-app --typescript --tailwind
cd my-app
pnpm dev

App Router 核心概念

App Router 引入了服务端组件（RSC）作为默认选项，这意味着你的组件默认在服务端渲染，只有加了 'use client' 才会在客户端运行。

Server Components

// app/page.tsx — 这是一个服务端组件
import { db } from '@/lib/db'
 
export default async function Page() {
  // 直接在组件里查数据库，无需 API 路由
  const posts = await db.select().from(schema.posts)
  return <PostList posts={posts} />
}

Server Actions

Server Actions 让表单提交和数据变更变得极为简洁：

'use server'
 
export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  await db.insert(schema.posts).values({ title })
}

部署到 Vercel

只需连接 GitHub 仓库，Vercel 会自动检测 Next.js 项目并完成配置。每次推送到 main 分支都会触发自动部署。

总结

Next.js 16 的开发体验已经相当成熟，配合 Vercel 的边缘网络，可以轻松构建高性能的全栈应用。

评论

请登录后发表评论

评论列表