Next.js 教程系列：从入门到架构实战

玲小珑2025-06-24 9:55

前言

大家好，我是鲫小鱼。是一名不写前端代码的前端工程师，热衷于分享非前端的知识，带领切图仔逃离切图圈子，欢迎关注我，微信公众号：《鲫小鱼不正经》。欢迎点赞、收藏、关注，一键三连！！

第一章：Next.js 概述与现代前端渲染模式

教程简介

本章将带您进入 Next.js 的世界，从宏观角度理解其作为全栈 React 框架的价值，并深入探讨现代前端应用中各种渲染模式的原理、优势与适用场景。我们将从 Next.js 的演进历程出发，为您勾勒出其在前端开发生态中的重要地位，并引导您初步构建一个 Next.js 应用，体验其核心特性。

理论讲解

1.1 Next.js 的演进与价值主张

随着前端技术的发展，SPA (Single Page Application) 逐渐成为主流。然而，SPA 在首次加载性能和 SEO (Search Engine Optimization) 方面存在天然的劣势。为了解决这些问题，各种服务端渲染 (SSR) 和静态站点生成 (SSG) 方案应运而生。Next.js 正是在这样的背景下，作为 React 生态中最优秀的框架之一，提供了开箱即用的解决方案。

Next.js 是一个基于 React 的全栈框架，它允许开发者以 React 的方式构建全栈应用程序，同时兼顾了性能、SEO 和开发体验。它的核心价值在于：

  • 混合渲染能力：Next.js 能够灵活地在客户端（CSR）、服务端（SSR）和构建时（SSG）进行渲染，甚至支持增量静态再生（ISR）和流式传输（Streaming），让开发者可以根据不同场景选择最合适的渲染策略。
  • 开箱即用的全栈能力：通过 API Routes 和 Server Actions，Next.js 允许您在同一个项目中构建前端和后端逻辑，大大简化了全栈开发的复杂性。
  • 卓越的开发体验：自动代码分割、快速刷新（Fast Refresh）、零配置等特性，极大地提升了开发效率。
  • 生产级优化：内置图像优化、字体优化等功能，帮助开发者轻松构建高性能应用。
  • 强大的生态系统：拥有庞大的社区支持和丰富的插件生态，方便开发者快速集成各种功能。

1.2 理解现代前端渲染模式

在 Next.js 的世界中，理解不同的渲染模式至关重要。它们各有优缺点，适用于不同的业务场景。

1.2.1 客户端渲染 (Client-Side Rendering - CSR)

CSR 是传统 SPA 的主要渲染方式。浏览器下载 HTML、CSS 和 JavaScript 文件后，JavaScript 负责在客户端生成并渲染页面内容。例如，一个典型的 React 应用就是 CSR 的代表。

  • 优点 ：
    • 快速的后续页面加载：一旦首次加载完成，后续页面切换无需重新请求 HTML，用户体验流畅。
    • 开发简单：与传统 React/Vue 等前端框架开发模式一致。
    • 服务器压力小：服务器只需提供静态资源，无需进行页面渲染。
  • 缺点 ：
    • 首次加载慢：需要等待所有 JavaScript 下载、解析和执行后才能看到内容，可能出现白屏。
    • SEO 不友好：搜索引擎爬虫可能无法抓取到完整的页面内容，影响搜索排名。
1.2.2 服务端渲染 (Server-Side Rendering - SSR)

SSR 是指在服务器端将 React 组件渲染为 HTML 字符串，然后将 HTML 字符串发送给客户端。客户端接收到 HTML 后，再进行"注水"（Hydration），使页面变为可交互的 SPA。

  • 优点 ：
    • 首次加载性能好：用户可以更快地看到页面内容，提升用户体验。
    • SEO 友好：搜索引擎爬虫可以直接抓取到完整的 HTML 内容，有利于搜索排名。
    • 更利于网络爬虫：对于需要被爬虫抓取内容的网站（如新闻、电商），SSR 具有天然优势。
  • 缺点 ：
    • 服务器压力大：每次请求都需要服务器进行页面渲染，增加服务器负担。
    • TTFB (Time To First Byte) 较长：服务器渲染和传输 HTML 需要一定时间。
    • 开发复杂度增加：需要考虑服务端和客户端环境的差异。
1.2.3 静态站点生成 (Static Site Generation - SSG)

SSG 是指在构建时（Build Time）将页面预渲染成静态 HTML 文件。这些静态文件可以直接部署到 CDN 上，用户请求时直接从 CDN 获取，无需服务器渲染。

  • 优点 ：
    • 极致的加载速度：内容直接从 CDN 传输，加载速度最快。
    • 最高的安全性：无需服务器运行时环境，攻击面小。
    • SEO 友好：与 SSR 类似，搜索引擎可以直接抓取到完整 HTML。
    • 服务器成本低：只需静态文件托管，无需额外的服务器资源。
  • 缺点 ：
    • 不适合频繁更新的内容：每次内容更新都需要重新构建和部署整个网站。
    • 生成时间长：页面数量越多，构建时间越长。
1.2.4 增量静态再生 (Incremental Static Regeneration - ISR)

ISR 是 Next.js 独有的特性，它结合了 SSG 的高性能和 SSR 的灵活性。它允许您在构建时生成静态页面，并在部署后按需重新生成这些页面，而无需重新部署整个应用程序。

  • 优点 ：
    • 兼顾性能和实时性：既有 SSG 的加载速度，又能实现内容的动态更新。
    • 降低构建时间：无需每次都重新构建整个网站，只更新需要更新的页面。
  • 缺点 ：
    • 复杂度略高 ：需要理解 revalidate 参数的机制。
1.2.5 流式传输 (Streaming)

Streaming 是一种更先进的渲染模式，它允许您在服务端渲染 HTML 时，分块地将内容发送给浏览器。这样，用户可以更快地看到部分内容，即使整个页面尚未完全渲染完成。

  • 优点 ：
    • 更快的首次内容绘制 (FCP)：用户可以更快地看到页面的骨架。
    • 更好的用户体验：内容逐步加载，减少白屏时间。
  • 缺点 ：
    • 实现复杂：需要后端支持流式传输。

代码示例

2.1 使用 create-next-app 初始化您的第一个 Next.js 项目

create-next-app 是 Next.js 官方提供的脚手架工具，可以帮助您快速创建一个 Next.js 项目。

打开您的终端，执行以下命令：

bash 复制代码 
npx create-next-app my-nextjs-app --ts --eslint --app
# 或者使用 pnpm
pnpm create-next-app my-nextjs-app --ts --eslint --app
  • my-nextjs-app：您的项目名称。
  • --ts：使用 TypeScript。
  • --eslint：配置 ESLint 进行代码规范检查。
  • --app：使用 App Router (Next.js 13+ 新增的路由方式)。

创建完成后，进入项目目录并运行开发服务器：

bash 复制代码 
cd my-nextjs-app
pnpm dev # 或者 npm run dev / yarn dev

您的 Next.js 应用将在 http://localhost:3000 启动。

2.2 项目结构解析：app/ 和 pages/ 目录

Next.js 支持两种路由方式：Pages Router (基于 pages/ 目录) 和 App Router (基于 app/ 目录)。在 create-next-app 时，如果您选择了 --app 选项，则会默认使用 App Router。

  • app/ 目录 ：这是 Next.js 13+ 引入的新路由方式，推荐用于新项目。它基于文件系统路由，支持服务端组件 (Server Components) 和客户端组件 (Client Components) 的混合。
    • app/page.tsx：根路由页面。
    • app/layout.tsx：全局布局文件。
    • app/error.tsx：错误处理组件。
    • app/loading.tsx：加载状态组件。
  • pages/ 目录 ：这是 Next.js 传统的路由方式。每个文件对应一个路由。
    • pages/index.tsx：网站首页。
    • pages/api/：用于创建 API Routes 的目录。
  • public/ 目录：用于存放静态资源（如图片、字体等），可以直接通过根路径访问。
  • components/ 目录：通常用于存放可复用的 React 组件。

2.3 一个简单的首页示例

如果您使用 App Router，app/page.tsx 可能是这样的：

typescript 复制代码 
// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>欢迎来到我的 Next.js 教程！</h1>
      <p>这是一个使用 Next.js 构建的简单首页。</p>
    </main>
  );
}

如果您使用 Pages Router，pages/index.tsx 可能是这样的：

typescript 复制代码 
// pages/index.tsx
import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>我的 Next.js 教程</title>
        <meta name="description" content="Next.js 教程第一章" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>欢迎来到我的 Next.js 教程！</h1>
        <p>这是一个使用 Next.js 构建的简单首页。</p>
      </main>
    </>
  );
}

实战项目

3.1 创建一个基础的用户信息展示页面

我们将创建一个简单的用户信息展示页面，该页面通过客户端数据获取来模拟用户信息，并对比传统 SPA 的异同。

首先，在 app/ 目录下（如果您使用 App Router）或 pages/ 目录下（如果您使用 Pages Router）创建一个新文件，例如 user.tsx 或 app/user/page.tsx。

使用 App Router (app/user/page.tsx)

typescript 复制代码 
// app/user/page.tsx
'use client'; // 标记为客户端组件

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

export default function UserProfile() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        // 模拟网络请求
        await new Promise((resolve) => setTimeout(resolve, 1000));
        const fetchedUser: User = {
          id: 1,
          name: '鲫小鱼',
          email: 'jixiaoyu@example.com',
        };
        setUser(fetchedUser);
      } catch (err) {
        setError('用户信息加载失败');
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, []);

  if (loading) {
    return <p>加载中...</p>;
  }

  if (error) {
    return <p style={{ color: 'red' }}>错误：{error}</p>;
  }

  if (!user) {
    return <p>没有找到用户。</p>;
  }

  return (
    <div>
      <h1>用户资料</h1>
      <p>姓名: {user.name}</p>
      <p>邮箱: {user.email}</p>
    </div>
  );
}

使用 Pages Router (pages/user.tsx)

typescript 复制代码 
// pages/user.tsx
import { useState, useEffect } from 'react';
import Head from 'next/head';

interface User {
  id: number;
  name: string;
  email: string;
}

export default function UserProfile() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        // 模拟网络请求
        await new Promise((resolve) => setTimeout(resolve, 1000));
        const fetchedUser: User = {
          id: 1,
          name: '鲫小鱼',
          email: 'jixiaoyu@example.com',
        };
        setUser(fetchedUser);
      } catch (err) {
        setError('用户信息加载失败');
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, []);

  if (loading) {
    return <p>加载中...</p>;
  }

  if (error) {
    return <p style={{ color: 'red' }}>错误：{error}</p>;
  }

  if (!user) {
    return <p>没有找到用户。</p>;
  }

  return (
    <>
      <Head>
        <title>用户资料</title>
      </Head>
      <div>
        <h1>用户资料</h1>
        <p>姓名: {user.name}</p>
        <p>邮箱: {user.email}</p>
      </div>
    </>
  );
}

3.2 对比传统 SPA 的异同

异同点分析：

  • 路由：在传统 SPA 中，您可能需要手动配置 React Router 或类似的库来处理路由。在 Next.js 中，App Router 或 Pages Router 通过文件系统约定自动为您处理路由，大大简化了配置。
  • 数据获取 ：上述示例都是客户端数据获取。在传统 SPA 中，您通常会在 useEffect 中发起 API 请求。在 Next.js 中，除了 CSR，您还可以利用 getServerSideProps 或 getStaticProps 在服务端或构建时获取数据，这是传统 SPA 无法直接实现的。
  • 开发体验：Next.js 提供了快速刷新 (Fast Refresh)，在开发过程中，您对代码的修改会立即反映在浏览器中，无需手动刷新页面。
  • 构建与部署：Next.js 提供了优化的构建和部署流程，尤其是在 Vercel 等平台上，可以实现零配置部署。

通过本章的学习，您应该对 Next.js 的核心价值以及各种前端渲染模式有了初步的认识。下一章我们将深入探讨开发环境的配置与工具链。

最后感谢阅读！欢迎关注我，微信公众号：《鲫小鱼不正经》。欢迎点赞、收藏、关注，一键三连！！！

相关推荐
柳鲲鹏几秒前
WINDOWS最快布署WEB服务器：apache2
服务器·前端·windows
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头1 小时前
AIStarter最新版怎么卸载AI项目？一键删除操作指南（附路径设置技巧）
前端·后端·github
一只叫煤球的猫2 小时前
普通程序员，从开发到管理岗，为什么我越升职越痛苦？
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解：实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.3 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09013 小时前
浅析Web存储系统
前端
foxhuli2294 小时前
禁止ifrmare标签上的文件，实现自动下载功能，并且隐藏工具栏
前端
热门推荐
01手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！02如何将markdown生成pdf03Coze扣子平台完整体验和实践（附国内和国际版对比）04Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面05鸽了六年的某大厂面试题：你会手写一个模板引擎吗？06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）08《C#图解教程 第5版》深度推荐09DeepSeek各版本说明与优缺点分析10华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南