Next.js 全指南：从核心概念到最佳实践
一、 Next.js 是什么？
Next.js 是由 Vercel 公司开发的一个基于 React 的全栈框架。传统的 React 应用通常是单页应用（SPA），虽然提供了流畅的用户体验，但在首屏加载速度（白屏时间长）和搜索引擎优化（SEO）方面存在天然劣势。 Next.js 的出现完美解决了这些问题。它在 React 的基础上扩展了能力，提供了服务端渲染（SSR）、静态站点生成（SSG）等特性，同时保留了 React 的组件化开发体验。如今，Next.js 已经成为构建现代 Web 应用最流行的前端框架之一。
二、 Next.js 的核心特性
1. 多种渲染模式
Next.js 最强大的地方在于它支持多种渲染模式，你可以根据页面需求灵活选择：
- SSR (Server-Side Rendering) 服务端渲染： 每次用户请求时，服务器都会生成 HTML 返回。适合数据频繁变动、需要强 SEO 的页面（如电商商品详情页）。
- SSG (Static Site Generation) 静态站点生成： 在构建时生成 HTML。适合博客、文档网站，速度极快，可直接部署到 CDN。
- ISR (Incremental Static Regeneration) 增量静态重新生成： 结合了 SSG 的速度和 SSR 的动态性。无需重新构建整个网站，即可在后台自动更新静态页面的内容。
- CSR (Client-Side Rendering) 客户端渲染： 传统的 React 渲染方式，适合后台管理系统等不需要 SEO 的动态交互页面。
2. 基于文件系统的路由
在 Next.js 中，你不再需要像 React 那样配置 react-router。你只需要在 app 或 pages 目录下创建文件，文件路径即路由路径。
3. API 路由 (API Routes / Route Handlers)
Next.js 允许你在同一个项目中编写后端接口。你可以直接在项目中创建 API 路由，处理数据库请求、身份验证等逻辑，实现真正的全栈开发。
4. 内置的性能优化
next/image： 自动进行图片懒加载、根据设备尺寸调整图片大小、防止布局偏移。next/font： 自动优化字体，消除外部网络请求，零布局偏移。next/link： 自动进行代码分割和预取，实现页面的无缝秒开。
三、 如何正确编写 Next.js 代码（基于 App Router 最佳实践）
自 Next.js 13 引入 App Router（app 目录）以来，Next.js 的开发范式发生了重大变化，全面拥抱了 React 的服务端组件。以下是在现代 Next.js 中编写高质量代码的最佳实践。
1. 明确 Server Components 与 Client Components 的边界
在 App Router 中，默认所有的组件都是服务端组件。服务端组件不会将 JavaScript 发送到客户端，这极大减小了包体积。 正确做法：
- 尽量将组件保持在服务端。
- 只有当组件需要用到状态（
useState）、生命周期（useEffect）、事件监听（onClick）或浏览器 API 时，才使用客户端组件。 - 在客户端组件文件的最顶部添加
"use client"指令。
TSX
// app/page.tsx (Server Component - 默认)
import { db } from '@/lib/db';
import Counter from './Counter';
export default async function Page() {
// 可以直接在服务端组件中访问数据库或进行异步请求
const users = await db.user.findMany();
return (
<div>
<h1>用户列表</h1>
<ul>
{users.map(u => <li key={u.id}>{u.name}</li>)}
</ul>
<Counter /> {/* 嵌入客户端组件 */}
</div>
);
}
TSX
// app/Counter.tsx (Client Component)
'use client'; // 必须声明
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>点击了 {count} 次</button>;
}
2. 正确使用数据获取
正确做法：
- 在 Server Components 中直接使用
fetch或数据库 ORM 进行数据获取。 - 利用 Next.js 扩展的
fetch缓存机制控制数据的新鲜度。
TSX
// 默认情况下，fetch 会被缓存（相当于 SSG）
const res = await fetch('https://api.example.com/data');
// 如果需要每次请求都获取最新数据（相当于 SSR）
const dynamicRes = await fetch('https://api.example.com/data', { cache: 'no-store' });
// 如果需要每隔一段时间重新验证（ISR）
const isrRes = await fetch('https://api.example.com/data', { next: { revalidate: 60 } }); // 60秒后更新
3. 路由跳转必须使用 next/link
错误做法：
使用普通的 <a> 标签进行页面跳转，这会导致整个页面重新刷新，丢失状态且加载缓慢。
TSX
// ❌ 错误
<a href="/about">关于我们</a>
正确做法：
使用 next/link，它会自动预取链接页面并在后台加载，点击时实现瞬时切换。
TSX
// ✅ 正确
import Link from 'next/link';
<Link href="/about">关于我们</Link>
4. 使用内置组件优化性能
永远不要使用原生的 <img> 标签，而是使用 next/image。
TSX
import Image from 'next/image';
// ✅ 正确：自动适配尺寸、懒加载、支持 WebP
<Image
src="/hero-image.png"
alt="Hero"
width={800}
height={600}
priority // 如果是首屏大图，添加此属性以优先加载
/>
同样，字体也必须使用 next/font：
TSX
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
);
}
5. 使用 Metadata API 处理 SEO
在 Pages Router 时代，我们需要在每个页面的 Head 中塞入 SEO 标签。在 App Router 中，只需导出一个 metadata 对象即可。
TSX
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
images: [post.coverImage],
},
};
}
6. 合理组织项目目录结构
推荐采用清晰的目录结构，将业务逻辑、UI 组件和工具函数分离：
text
src/
├── app/ # 路由与页面
│ ├── layout.tsx # 根布局
│ ├── page.tsx # 首页
│ └── dashboard/ # 嵌套路由
│ ├── page.tsx
│ └── loading.tsx # 路由级 Loading UI
├── components/ # 通用 UI 组件
│ ├── ui/ # 基础组件 (Button, Input 等)
│ └── shared/ # 业务共享组件
├── lib/ # 核心逻辑
│ ├── db.ts # 数据库连接
│ ├── utils.ts # 工具函数
│ └── api.ts # API 请求封装
└── hooks/ # 自定义 React Hooks (仅限客户端使用)
四、 总结
Next.js 不仅仅是一个 React 框架，它是一种现代 Web 应用的构建哲学。正确编写 Next.js 代码的核心在于**“拥抱服务端”**。 通过优先使用 Server Components、合理利用 Next.js 扩展的缓存机制、严格使用内置的优化组件，你可以构建出加载极快、SEO 友好且易于维护的全栈应用。放弃传统的纯客户端思维，将逻辑尽量推到服务端执行，只在真正需要用户交互的地方引入客户端组件，这就是写出高质量 Next.js 代码的秘诀。