了解Next.js | wdkang 的博客

type

status

date

slug

summary

了解 Next.js

Next.js 是一个基于 React 的服务端渲染（SSR）和静态网站生成（SSG）框架，由 Vercel 团队维护。随着前端工程化的发展，越来越多的开发者选择使用 Next.js 构建高性能、易维护的 Web 应用。

一、Next.js 是什么？

Next.js 是一个 React 的服务端渲染框架，同时支持：

SSR（Server-Side Rendering）服务端渲染

SSG（Static Site Generation）静态生成

ISR（Incremental Static Regeneration）增量静态生成

API 路由

图片优化、国际化、本地开发热更新等功能

Edge Functions 支持

Middleware 中间件

App Router（新一代路由系统）

官方定义：

The React Framework for Production.

Next.js 的目标是提供一个开箱即用的生产级 React 应用开发环境。

二、为什么选择 Next.js？

✅ 性能优化

自动代码分割（按需加载）

内置图片优化（next/image）、懒加载、字体优化

SSR / SSG / ISR 提高首屏加载速度和 SEO

支持 Edge Runtime，缩短响应时间

✅ 开发体验优秀

热更新、自动路由、TypeScript 支持

集成 ESLint、Prettier、Tailwind 等现代工具链

新的 App Router 模型支持嵌套路由、布局复用

✅ SEO 友好

SSR 和 SSG 支持让页面内容在服务端生成，利于搜索引擎抓取

✅ 跨平台部署

可部署至 Vercel、Netlify、Node Server、Docker、甚至边缘平台（Edge Functions）

三、Next.js 快速上手

安装项目

目录结构简介

四、核心功能详解

1. App Router（推荐）

Next.js 13 引入的新一代路由系统 app/，具备以下特性：

layout.tsx 实现布局复用

loading.tsx 支持页面级加载占位符

error.tsx 统一错误边界

Server Component 默认支持（性能更优）

2. Image 优化

使用 next/image 自动进行图片懒加载、响应式尺寸、WebP 压缩等优化。

3. Middleware

通过 middleware.ts 可以实现权限控制、URL 重写、国际化等逻辑：

4. API Routes

支持 Node 风格的 API 接口：

五、进阶知识

Server Components

Next.js 支持 Server Components，可以在服务器上渲染组件，减少客户端 JS 体积：

动态导入（Dynamic Import）

Incremental Static Regeneration（ISR）

支持页面增量更新，不必重新构建整个网站：

Edge Runtime

支持运行在边缘节点，提升 API 和页面响应速度：

六、常见问题与挑战

1. 动态路由 + 数据获取较复杂

对新手来说理解 getStaticPaths 与 getStaticProps 的联动存在门槛。

2. 构建时间长

使用 getStaticProps + 动态数据构建大型站点时，构建时间可能变长。

3. 后端能力受限

虽然支持 API 路由，但不如传统后端功能强大，复杂后端逻辑仍需配合后端服务。

4. SSR 性能考量

SSR 页面每次请求都渲染一次，流量高时需考虑缓存方案（如 Vercel Edge Function、CDN）。

5. 配置灵活但繁琐

next.config.js 和 Webpack 的高级配置有一定学习成本。

七、适用场景

场景	是否推荐使用 Next.js
内容型网站（Blog、Docs）	✅ 非常适合（SSG）
SEO 要求高的网站	✅ 强烈推荐
纯客户端 SPA 应用	❌ 可考虑 CRA / Vite
多语言网站	✅ 支持 i18n
后台管理系统	✅ 可搭配 SSR/API
实时交互类应用（如聊天）	✅ 支持 edge + websocket