Next.js 完全指南：React 全栈框架的王者

如果说 React 是前端 UI 的王者，那么 Next.js 就是让 React 走向全栈的"神器"。它让 React 不仅能做 SPA（单页应用），还能做 SSR（服务端渲染）、API、Edge Functions 等。

Next.js 是什么？
#

Next.js 是 Vercel（原 Zeit）打造的 React 全栈框架，2016 年发布。它在 React 之上构建了一层抽象，提供了服务端渲染、静态生成、API 路由等功能。

类比理解
#

对比项	纯 React	Next.js
页面渲染	客户端渲染（CSR）	支持 SSR、SSG、ISR
路由	需要 React Router	文件系统路由（自动）
API	需要额外搭建	内置 API Routes
SEO	较差（需要额外处理）	天然 SEO 友好
就像	只有发动机的汽车	整车交付的汽车

核心特性
#

1. 多种渲染模式：按需选择
#

Next.js 支持多种渲染策略，你可以根据场景选择最合适的：

客户端渲染（CSR）
#

传统的 React 渲染方式，页面在浏览器中生成。

// app/page.js（App Router）
'use client';

import { useState, useEffect } from 'react';

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);

  return <div>{data ? data.message : '加载中...'}</div>;
}

服务端渲染（SSR）
#

页面在服务器上渲染，每次请求都会重新生成。

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store'  // 每次请求都重新获取
  });
  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <div>{data.message}</div>;
}

静态站点生成（SSG）
#

页面在构建时生成，一次构建，永久缓存。

// app/blog/[slug]/page.js
async function getPost(slug) {
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  return res.json();
}

export async function generateStaticParams() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

增量静态再生（ISR）
#

页面静态生成，但可以定时更新。

// 每次请求间隔 60 秒重新验证
export const revalidate = 60;

async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.content}</div>;
}

2. App Router：新一代路由系统
#

Next.js 13+ 引入的 App Router 是全新的路由和渲染范式：

app/
├── page.js              // 首页 (/)
├── layout.js            // 根布局
├── blog/
│   ├── page.js          // /blog
│   └── [slug]/
│       └── page.js      // /blog/:slug
└── api/
    └── route.js         // /api/* API 路由

layout.js 的作用：

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="zh">
      <body>
        <nav>导航栏</nav>
        <main>{children}</main>
        <footer>页脚</footer>
      </body>
    </html>
  );
}

布局会自动包裹子页面，且不会在页面切换时重新渲染—— 这就是"持久布局"。

3. Server Components：服务端组件
#

App Router 的一大创新是默认使用 Server Components（服务端组件）：

// 这是一个 Server Component（默认）
async function BlogPost({ id }) {
  // 直接在服务端获取数据
  const post = await db.posts.find(id);
  return <article>{post.content}</article>;
}

Server Components 的优势：

减少客户端 JavaScript 体积
直接访问后端资源（数据库、文件系统）
自动代码分割
更好的 SEO

4. API Routes：内置后端
#

Next.js 允许你在项目中直接编写 API：

// app/api/user/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  const users = await db.users.findMany();
  return NextResponse.json(users);
}

export async function POST(request) {
  const body = await request.json();
  const user = await db.users.create(body);
  return NextResponse.json(user, { status: 201 });
}

5. 图像和字体优化
#

Next.js 内置优化功能：

import Image from 'next/image';
import { Inter } from 'next/font/google';

// 优化字体
const inter = Inter({ subsets: ['latin'] });

export default function Page() {
  return (
    <main className={inter.className}>
      {/* 优化图片 - 自动格式转换、懒加载 */}
      <Image
        src="/hero.jpg"
        alt="Hero"
        width={800}
        height={600}
        priority  // 首屏关键图片预加载
      />
    </main>
  );
}

为什么 Next.js 如此流行？
#

1. 全栈能力
#

Next.js 让 React 开发者可以：

前端：构建 UI 组件
后端：编写 API Routes
数据库：直接访问（通过 Server Components）
部署：一键部署到 Vercel

2. 性能优化
#

Next.js 做了大量性能优化：

自动代码分割
图片优化
字体优化
预取（prefetching）
缓存策略

3. SEO 友好
#

服务端渲染和静态生成让 SEO 变得简单：

搜索引擎可以直接抓取完整 HTML
Meta 标签容易配置
Open Graph 图像自动生成

4. 生态丰富
#

Vercel 官方维护
与 React 同步更新
大量社区插件
完善的文档和示例

适用场景
#

场景	适合程度	说明
营销网站	⭐⭐⭐⭐⭐	SSG + ISR，性能极佳
博客 / 内容网站	⭐⭐⭐⭐⭐	SSG，SEO 友好
SaaS 产品	⭐⭐⭐⭐⭐	SSR + CSR 混合
电商网站	⭐⭐⭐⭐⭐	ISR，兼顾性能和更新
企业官网	⭐⭐⭐⭐⭐	静态生成，快速加载
API 后端	⭐⭐⭐⭐	API Routes 足够轻量

学习路线建议
#

入门阶段（1-2 周）
#

理解 Next.js 项目结构
掌握 App Router 基本用法
学习页面和布局
理解 SSR、SSG、CSR 的区别

进阶阶段（2-3 周）
#

深入 Server Components
掌握数据获取（fetch、Server Actions）
学习 API Routes
理解路由组和中间件

高级阶段（持续学习）
#

性能优化技巧
Vercel 部署
Edge Functions
缓存机制深入

Next.js 14/15 新特性
#

特性	说明
Server Actions	在服务端执行函数，像调用普通函数一样
Partial Prerendering	静态和动态混合的渲染方式
Turbopack	Rust 编写的打包工具，比 Webpack 快 10 倍
串行流式渲染	更精细的流式渲染控制

与其他框架对比
#

特性	Next.js	Nuxt (Vue)	Remix
框架基础	React	Vue	React
渲染模式	SSR/SSG/CSR	SSR/SSG/CSR	SSR（默认）
路由	文件系统	文件系统	文件系统
API	内置	内置	嵌套路由
部署	Vercel（原生）	任意平台	任意平台
上手难度	⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

简单来说：

Next.js：React 生态最强全栈方案，Vercel 加持
Nuxt：Vue 开发者的全栈选择
Remix：更现代的 Web 标准理念，学习曲线稍陡

总结
#

Next.js 将 React 从一个前端库扩展为完整的全栈框架：

多种渲染模式—— SSR、SSG、ISR 按需选择
App Router—— 现代化的路由和布局系统
Server Components—— 减少客户端代码，提升性能
API Routes—— 前后端一体化开发
Vercel 生态—— 一键部署，极致体验

如果你使用 React，Next.js 几乎是必学的框架。它不仅能提升开发体验，还能带来更好的性能和用户体验。

下期预告：Next.js 走的是"React 全栈"路线，而 Astro 则是"静态优先"的另一种思路—— 以" Islands 架构"实现零 JavaScript 输出，下一篇我们来详细介绍这个"性能王者"。

Next.js 是什么？#

类比理解#

核心特性#

1. 多种渲染模式：按需选择#

客户端渲染（CSR）#

服务端渲染（SSR）#

静态站点生成（SSG）#

增量静态再生（ISR）#

2. App Router：新一代路由系统#

3. Server Components：服务端组件#

4. API Routes：内置后端#

5. 图像和字体优化#

为什么 Next.js 如此流行？#

1. 全栈能力#

2. 性能优化#

3. SEO 友好#

4. 生态丰富#

适用场景#

学习路线建议#

入门阶段（1-2 周）#

进阶阶段（2-3 周）#

高级阶段（持续学习）#

Next.js 14/15 新特性#

与其他框架对比#

总结#

相关文章