Nextjs 原理

nextjs 是基于 React 的 SSR 框架

在 React 的基础上提供了许多开箱即用的功能和最佳实践，旨在简化 React 应用的开发，尤其是在服务器端渲染（SSR）、静态网站生成（SSG）以及其他 Web 应用的常见需求方面

与 react 的不同之处

1. 服务端渲染（SSR）

// Next.js 页面组件
export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  return { props: { data } }
}

export default function Page({ data }) {
  return <div>{data}</div>
}

2. 静态站点生成（SSG）

export async function getStaticProps() {
  return {
    props: { data: '静态数据' },
    revalidate: 60 // ISR：每60秒重新生成
  }
}

3. 文件系统路由

pages/
  ├── index.js        → /
  ├── about.js        → /about
  ├── blog/
  │   ├── index.js    → /blog
  │   └── [slug].js   → /blog/:slug
  └── api/
      └── hello.js    → /api/hello

可以直接在 api 文件夹下写后端代码。请求接口，获取数据等

// pages/api/users.js
export default function handler(req, res) {
  res.status(200).json({ users: [] })
}

内置优化

• 自动代码分割
• 图片优化（next/image）
• 字体优化
• 脚本优化（next/script）

写法上的主要差异

路由系统

// React（通常使用 React Router）
import { BrowserRouter, Routes, Route } from 'react-router-dom'

// Next.js（基于文件系统）
// 自动生成路由，无需配置

数据获取

// React：通常在 useEffect 中获取
useEffect(() => {
  fetchData()
}, [])

// Next.js：使用特殊的数据获取方法
export async function getServerSideProps() {
  // 服务端获取数据
}

构建过程

// Next.js 构建时：
1. 识别页面类型（静态/动态）
2. 预渲染静态页面
3. 生成客户端 bundle
4. 设置服务端渲染处理器

架构对比

React 应用架构

客户端 ├── React 库 ├── 路由库（React Router） ├── 状态管理（Redux/MobX） ├── 构建工具（Webpack配置） └── 服务端渲染（需手动配置）

Next.js 应用架构

Next.js 框架 ├── React（内置） ├── 路由系统（文件系统） ├── 服务端渲染（开箱即用） ├── API 路由（Node.js） ├── 构建优化（自动配置） └── 部署优化（Vercel）

左右场景区别

使用 React 的情况：

• 单页面应用（SPA）
• 需要高度自定义构建配置
• 应用主要在客户端运行
• 不需要 SEO

使用 Next.js 的情况：

• 内容型网站（博客、电商、文档）
• 需要 SEO 优化
• 需要服务端渲染
• 全栈应用（前后端一体化）
• 希望快速启动项目

总结

Next.js 在 React 的基础上，提供了完整的全栈解决方案，简化了配置，优化了性能，特别适合需要 SEO、服务端渲染或全栈开发的项目。而纯 React 更适合需要最大灵活性的 SPA 应用。