Next.js 初识：从 React 到全栈开发的第一步(一)

网页建筑师
495 阅读13分钟

React 与 Next.js 的关系

要理解 Next.js，首先需要明白它与 React 的关系。简单来说：

Next.js 是一个基于 React 的开源框架。

这意味着 Next.js 并没有重新发明轮子，它的所有 UI 渲染能力都构建在 React 之上。你可以将所有 React 知识，如组件、Hooks、JSX 等——无缝地应用在 Next.js 项目中。那么，如果 Next.js 本质上还是 React，我们为什么需要它呢？

React 本身是一个专注于构建用户界面的库（Library），它主要关心的是 “V”（View）层 。一个完整的、生产级的 Web 应用还需要考虑 路由、数据获取、代码分割、服务端渲染、SEO 优化 等一系列问题。开发者通常需要自行选择和集成各种工具来解决这些问题，这个过程可能非常繁琐且容易出错。

Next.js 的出现正是为了解决这个问题。它是一个 “全家桶”式的框架（Framework），在 React 的基础上提供了 一整套开箱即用的解决方案，涵盖了从开发到部署的方方面面，让开发者可以更专注于业务逻辑的实现。

为了更生动地理解，我们可以做一个比喻：

  • React 就像一个顶级的 汽车引擎（例如 V12 发动机）。它拥有无与伦比的动力和性能，但你不能只靠一个引擎上路。你需要方向盘、车轮、底盘和车身。
  • Next.js 则是一辆精心打造的、随时可以上路的豪华跑车。它不仅搭载了 React 这个强大的引擎，还为你预装了最先进的导航系统（基于文件系统的路由）、坚固而灵活的车身（布局系统）、高效的燃油供应系统（优化的数据获取策略），以及顶级的安全功能（内置的 API 路由和中间件）。你无需成为汽车工程师，就能立即享受到驾驶的乐趣。

下表更直观地展示了 Next.js 如何将 React 从一个“库”提升为一个“全栈框架”，解决了纯 React 开发中的常见痛点：

功能领域React (需要自行实现或集成)Next.js (开箱即用)
路由需要 react-router-dom 等库基于文件系统的路由
数据获取useEffect + fetch, 或使用 SWR, React Query扩展的 fetch API，支持服务端数据获取
服务端渲染需要自建 Node.js 服务器和复杂的配置内置 SSR, SSG, ISR 支持
代码分割需要手动配置 React.lazy 和 Suspense自动按页面进行代码分割
SEO 优化实现复杂，需要预渲染或 SSR通过 SSR/SSG 轻松实现
构建与编译需要配置 Webpack, Babel内置基于 SWC 的高速编译器和 Turbopack
环境配置繁琐的 tsconfig.json, ESLint 等配置一键初始化，提供最佳实践默认配置

Next.js 的核心优势：不止于渲染

Next.js 的真正威力在于其灵活且强大的混合渲染能力，它允许你为应用的不同部分选择最合适的渲染策略。

Next.js 提供了多种渲染策略，以适应不同的应用场景，这是它最强大的功能之一。

  • 服务端渲染 (SSR - Server-Side Rendering): 每个页面请求都会在服务器上实时渲染成 HTML。这对于需要展示 高度动态、个性化内容（如用户个人中心、实时股票数据） 且对 SEO 要求高 的页面非常有利。

    // app/dashboard/page.tsx
// 设置为动态渲染
export const dynamic = 'force-dynamic';

async function DashboardPage() {
  const response = await fetch('https://api.example.com/user/profile', {
    headers: { /* ... */ },
  });
  const user = await response.json();

  return <h1>欢迎, {user.name}</h1>;
}

  • 静态站点生成 (SSG - Static Site Generation): 在构建时（build time），页面就被预先渲染成 HTML 文件。这是 App Router 的默认行为。当用户访问时，直接从 CDN 提供这些静态文件，速度极快。非常适合 博客、文档、营销页面 等内容不经常变化的场景。

    // app/blog/[slug]/page.tsx
// 默认就是静态生成
async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

  • 增量静态再生 (ISR - Incremental Static Regeneration): 这是 SSG 的一种增强模式。它允许你在应用运行期间，按一定时间间隔在后台重新生成静态页面，而无需重新构建整个应用。这兼顾了静态页面的高性能和内容的动态更新能力，适合内容会更新但不频繁的页面，如产品列表。

    // app/products/page.tsx
async function ProductsPage() {
  const response = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // 每小时重新生成一次
  });
  const products = await response.json();

  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

  • 客户端渲染 (CSR - Client-Side Rendering): 通过在文件顶部添加 'use client' 指令，可以将组件标记为客户端组件。浏览器下载最小的 HTML 和 JavaScript 包，然后由 JavaScript 在客户端完成页面渲染和交互。 适合高度交互、无需 SEO 的应用部分，如复杂的表单、设置面板等。

    // app/settings/form.tsx
'use client';

import { useState } from 'react';

export default function SettingsForm() {
  const [name, setName] = useState('');

  return (
    <form>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button>保存</button>
    </form>
  );
}
  • App Router: 这是 Next.js 13 之后引入的全新路由和渲染模型，基于 RSC(React Server Components) 构建。它让开发者可以更精细地控制组件是在服务端还是客户端渲染，实现了服务端组件和客户端组件的混合渲染，带来了更好的性能和开发体验。默认情况下，App Router 中的组件是服务器组件 (Server Components)，它们在服务器上渲染，可以减少发送到客户端的 JavaScript 量，并能直接访问数据库等后端资源。

搭建你的第一个 Next.js 应用

现在，让我们动手实践。确保你的电脑上已经安装了 Node.js (推荐 Node.js 18.18 或更高版本)。

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

npx create-next-app@latest

安装程序会引导你进行一系列的配置选择：

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

建议：对于新项目，强烈建议全部选择 “Yes”，特别是 TypeScript 和 App Router，这能让你获得最佳的开发体验。

完成后会自动安装后，进入项目目录并启动开发服务器：

cd my-app
pnpm dev

打开浏览器访问 http://localhost:3000，你将看到 Next.js 的欢迎页面。恭喜你，第一个 Next.js 应用已经成功运行！

image.png

项目结构概览

当你选择使用 src/ 目录后，你的项目结构大致如下：

my-app/
├── 📁 .git/                    # Git版本控制目录
├── 📁 node_modules/            # NPM依赖包目录
├── 📁 public/                  # 静态资源目录
│   ├── 🖼 favicon.ico          # 网站图标
│   ├── 🖼 next.svg             # Next.js官方Logo
│   ├── 🖼 vercel.svg           # Vercel平台Logo
│   ├── 🖼 globe.svg            # 地球图标
│   ├── 🖼 window.svg           # 窗口图标
│   └── 🖼 file.svg             # 文件图标
├── 📁 src/                     # 主要源代码目录
│   └── 📁 app/                 # Next.js App Router目录
│       ├── 📄 layout.tsx       # 根布局组件
│       ├── 📄 page.tsx         # 首页组件
│       ├── 🎨 globals.css      # 全局CSS样式
│       └── 🖼 favicon.ico      # 应用图标
├── 📋 package.json             # 项目配置和依赖管理
├── 📋 package-lock.json        # 依赖版本锁定文件
├── ⚙️ tsconfig.json           # TypeScript编译配置
├── ⚙️ next.config.ts          # Next.js框架配置
├── ⚙️ next-env.d.ts           # Next.js类型声明
├── ⚙️ eslint.config.mjs       # ESLint代码规范配置
├── ⚙️ postcss.config.mjs      # PostCSS处理配置
├── 📝 README.md               # 项目说明文档
└── 🚫 .gitignore              # Git忽略文件配置

最重要的目录是 src/app/。在 App Router 模型中，文件和文件夹的约定扮演着核心角色：

  • 文件夹定义路由：每个文件夹都代表一个 URL 片段。例如，src/app/dashboard/settings/ 对应于 /dashboard/settings 路由。
  • page.tsx: 定义该路由路径下可公开访问的 UI。这是用户访问一个路由时看到的实际页面内容。
  • layout.tsx: 定义可以被多个页面共享的 UI 结构。它会包裹其所在目录及所有子目录中的 page.tsx 或其他嵌套的 layout.tsx。布局是持久化的，意味着在路由切换时，布局本身不会重新渲染，只有页面内容会更新。这非常适合放置导航栏、页眉页脚等全局共享且状态需要保持的元素。
  • template.tsx: 与 layout.tsx 类似，它也包裹子路由。但关键区别在于，模板不是持久化的。每次导航到其子路由时，template.tsx 都会创建一个新的实例并重新渲染。这适用于需要依赖 useEffect、useState 的进入/退出动画，或者每次导航都需要重置状态的场景。
  • loading.tsx: 一个可选文件，用于创建加载状态。当路由下的内容正在加载时，Next.js 会自动使用 React Suspense 来展示你在 loading.tsx 中定义的 UI。
  • error.tsx: 一个可选文件，用于优雅地处理错误。当路由下的组件抛出错误时，Next.js 会展示你在 error.tsx 中定义的 UI，避免整个应用崩溃。
  • globals.css: 全局样式文件，会应用到整个应用的所有页面。

创建并链接你的第一个新页面

让我们尝试创建一个 /about 页面来加深理解。

  1. 在 src/app/ 目录下，创建一个名为 about 的新文件夹。
  2. 在 src/app/about/ 文件夹内，创建一个名为 page.tsx 的文件。
  3. 将以下代码粘贴到 src/app/about/page.tsx 中：
export default function AboutPage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">关于我们</h1>
      <p>这是一个使用 Next.js App Router 创建的关于页面。</p>
    </main>
  );
}

现在，回到浏览器并访问 http://localhost:3000/about。你将看到刚刚创建的“关于我们”页面。

页面间的导航

接着，让我们在首页和“关于我们”页面之间建立链接。Next.js 提供了一个内置的 <Link> 组件用于客户端导航，它能实现页面的快速跳转而无需整页刷新。

  1. 打开首页文件 src/app/page.tsx。
  2. 导入 Link 组件并添加一个指向 /about 的链接：
// src/app/page.tsx
import Link from 'next/link';

export default function HomePage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      {/* ... 其他内容 ... */}
      <Link href="/about" className="text-blue-500 hover:underline">
        前往“关于我们”页面
      </Link>
    </main>
  );
}
  1. 同样地，在 src/app/about/page.tsx 中添一个返回首页的链接：
// src/app/about/page.tsx
import Link from 'next/link';

export default function AboutPage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">关于我们</h1>
      <p>这是一个使用 Next.js App Router 创建的关于页面。</p>
      <Link href="/" className="text-blue-500 hover:underline">
        返回首页
      </Link>
    </main>
  );
}

现在，你可以在两个页面之间自由点击跳转，感受一下 Next.js 带来的流畅的单页应用（SPA）体验。

思考模式的转变：从客户端到全栈思维

从纯 React 转向 Next.js，不仅仅是学习一个新工具，更是一次开发思维模式的转变。你需要开始从“全栈”的视角来思考问题：

  • 组件的位置？ 这个组件应该在服务器上渲染（默认）以提升性能和安全性，还是必须在客户端渲染（使用 'use client'）以实现交互？
  • 数据的来源？ 数据获取应该在服务器端直接进行（例如，直接查询数据库），还是在客户端进行？
  • 代码的边界？ 哪些代码（如密钥、数据库连接）应该永远只存在于服务器端，哪些代码可以安全地发送到客户端？

习惯这种思考方式是掌握 Next.js 的关键。

开发环境配置与工具推荐

为了获得最佳的 Next.js 开发体验，以下是一些推荐的开发环境配置和工具：

IDE 配置

VS Code 推荐扩展：

// .vscode/extensions.json
{
  "recommendations": [
    // Tailwind CSS 智能提示和自动补全
    "bradlc.vscode-tailwindcss",
    // TypeScript 语言支持
    "ms-vscode.vscode-typescript-next", 
    // 代码格式化工具
    "esbenp.prettier-vscode",
    // ESLint 代码检查工具
    "dbaeumer.vscode-eslint",
    // JSON 文件支持
    "ms-vscode.vscode-json"
  ]
}

VS Code 工作区设置：

// .vscode/settings.json
{
  // 保存文件时自动格式化代码
  "editor.formatOnSave": true,

  // 设置默认的代码格式化工具为 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 保存时自动修复 ESLint 检查出的问题
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 设置 TypeScript 导入模块时使用相对路径
  // 例如: import { Button } from '../components/Button' 
  // 而不是: import { Button } from '@/components/Button'
  "typescript.preferences.importModuleSpecifier": "relative",

  // 在 TypeScript/TSX 文件中启用 HTML 的 Emmet 缩写支持
  // 让你可以使用 div.class 这样的缩写来快速生成 HTML 结构
  "emmet.includeLanguages": {
    "typescript": "html",
    "typescriptreact": "html"
  }
}

包管理器选择

虽然 npm 是默认选择，但我们强烈推荐使用 pnpm ：

# 使用 pnpm（推荐）
npm install -g pnpm
pnpm create next-app@latest

pnpm 的优势：

pnpm 是一个快速、节省磁盘空间的包管理器,相比 npm 和 yarn 具有以下优势:

  • 更快的安装速度: 通过硬链接和内容寻址存储,避免重复下载和复制相同的依赖包
  • 更少的磁盘空间占用: 所有项目共享一个全局存储,相同的依赖包只会被存储一次
  • 严格的依赖管理: 通过符号链接确保依赖关系的正确性,防止幽灵依赖问题
  • 更好的 monorepo 支持: 内置工作空间功能,让多包仓库的管理更加简单高效
  • 安全性更高: 通过严格的依赖管理和权限控制,减少安全隐患
  • 兼容性好: 完全兼容 npm 生态,可以无缝使用 npm 包

这些优势使得 pnpm 成为现代 JavaScript 项目的理想包管理器选择。

Git 配置

创建项目后，建议立即初始化 Git 仓库：

git init
git add .
git commit -m "Initial commit: Next.js project setup"

推荐的 .gitignore 补充内容：

# ================================
# Next.js 项目专用 .gitignore 配置
# ================================

# Next.js 构建和缓存文件
.next/              # Next.js 构建输出目录
out/                # 静态导出输出目录
build/              # 自定义构建目录
dist/               # 分发目录
.swc/               # SWC 编译器缓存

# 环境变量文件
# 注意：.env.example 应该被提交作为模板
.env.local         # 本地环境变量

# 依赖管理
node_modules/       # 依赖包目录
# pnpm-lock.yaml    # pnpm 锁定文件

# 缓存目录
.cache/             # 通用缓存目录
.turbo/             # Turborepo 缓存
.eslintcache        # ESLint 缓存文件
.stylelintcache     # Stylelint 缓存文件
.prettiercache      # Prettier 缓存文件

# IDE 和编辑器
.vscode/            # VS Code 配置（可选择性提交 settings.json）

# 日志文件
*.log               # 通用日志文件
logs/               # 日志目录
pnpm-debug.log*     # pnpm 调试日志

# 临时文件和备份
*.tmp               # 临时文件
*.temp              # 临时文件
*.bak               # 备份文件
*.backup            # 备份文件

# 数据库文件（开发环境）
*.db                # 通用数据库文件
*.sqlite            # SQLite 数据库
*.sqlite3           # SQLite3 数据库

# 部署和云服务
.vercel             # Vercel 部署配置
.netlify            # Netlify 部署配置
.firebase           # Firebase 配置
.serverless         # Serverless 框架

# 性能分析
.next/analyze/      # Next.js Bundle Analyzer 输出
bundle-analyzer/    # Webpack Bundle Analyzer

总结

回顾一下核心概念：

🎯 核心理解

Next.js 的本质是一个 React 框架，它将 React 从一个专注于 UI 的库提升为一个功能完整的全栈框架，为开发者提供了从开发到部署的一站式解决方案。

思维模式转变：从纯客户端思维转向全栈思维，需要考虑组件的渲染位置、数据的获取方式，以及代码的安全边界。

🚀 技术优势

  1. 多样化的渲染策略

    • SSR：适合动态、个性化内容
    • SSG：适合静态内容，性能最佳
    • ISR：兼顾性能和内容更新
    • CSR：适合高交互性组件

  2. App Router 的强大功能

    • 基于文件系统的直观路由
    • 服务器组件和客户端组件的混合渲染
    • 内置的布局、加载和错误处理机制

  3. 开发体验优化

    • 零配置的开箱即用体验
    • 内置的 TypeScript 和 ESLint 支持
    • 基于 SWC 的高速编译器

💡 实践要点

  • 项目结构：理解 app/ 目录下各种特殊文件的作用
  • 导航机制：使用 <Link> 组件实现客户端路由
  • 开发环境：配置合适的 IDE 扩展和工具链
  • 版本控制：建立完善的 .gitignore 配置
avatar
文章
阅读
粉丝