Next.js 简介

Next.js 是一个由 Vercel 开发的基于 React 的 Web 开发框架，旨在简化 React 应用的开发流程，提供更好的性能和开发体验。

---

🌟 Next.js 的核心特点

1. 文件系统路由（File-system Routing）

• 在 pages/ 目录中创建文件就能自动变成路由，无需手动配置。

pages/index.tsx        // 访问 /about.tsx        // 访问 /aboutblog/[id].tsx    // 动态路由 /blog/123

2. 服务端渲染（SSR）与静态生成（SSG）

• 支持多种渲染模式：
  • getServerSideProps: 服务端渲染（每次请求都生成）
  • getStaticProps: 静态生成（构建时生成）
  • getStaticPaths: 支持动态路由的静态生成

3. API 路由

• 在 pages/api 下创建文件，可以快速构建后端接口，支持 Node.js 处理逻辑。

// pages/api/hello.ts
export default function handler(req, res) {res.status(200).json({ message: "Hello Next.js API" });
}

4. 自动代码拆分

• 每个页面只加载它所需要的 JS 和 CSS，提升性能。

5. 全栈开发支持

• 支持构建全栈应用，前后端统一项目架构。

6. 内置 CSS 和 Sass 支持

• 支持 CSS Modules、Sass、Tailwind 等流行 CSS 工具。

7. Image 和 Font 优化

• 内置 <Image /> 组件自动处理图像优化。
• 支持字体优化与 Google Fonts 集成。

---

🧱 与 React 区别

功能	React	Next.js
路由	手动配置	自动生成
SSR/SSG	手动搭建	开箱即用
API 路由	需要额外后端	自带
SEO 支持	不佳	很好
性能优化	自行处理	默认内置

---

🚀 适用场景

• SEO 要求较高的网站（如博客、电商）
• 企业官网、产品展示页面
• 需要 SSR 的内容丰富应用
• 中小型全栈项目

---