Next.js简介 #

一、什么是Next.js #

Next.js 是一个基于 React 的全栈 Web 开发框架，由 Vercel 公司开发和维护。它提供了构建现代 Web 应用所需的所有功能，从服务端渲染到静态生成，从路由系统到 API 路由，一应俱全。

1.1 发展历程 #

年份	版本	重要特性
2016	1.0	初始发布，支持服务端渲染
2017	2.0	支持自定义服务器
2018	3.0	静态导出、动态导入
2019	5.0	零配置TypeScript
2020	9.0	API路由、自动静态优化
2021	11.0	Conformance模式
2022	12.0	Rust编译器、Middleware
2022	13.0	App Router、React Server Components
2023	14.0	Server Actions稳定版
2024	15.0	Turbopack稳定版、改进的缓存

1.2 Next.js与React的关系 #

text

React (库)
├── 提供组件化开发能力
├── 虚拟DOM
├── 状态管理
└── 需要额外配置路由、构建等

Next.js (框架)
├── 基于React
├── 提供完整的开发解决方案
├── 内置路由系统
├── 多种渲染策略
├── API路由
└── 开箱即用的优化

二、核心特性 #

2.1 多种渲染策略 #

Next.js 支持多种渲染方式，可以根据页面需求灵活选择：

服务端渲染 (SSR)

tsx

async function Page() {
    const data = await fetch('https://api.example.com/data', {
        cache: 'no-store'
    })
    const posts = await data.json()
    
    return <div>{posts.map(post => <p key={post.id}>{post.title}</p>)}</div>
}

静态生成 (SSG)

tsx

async function Page() {
    const data = await fetch('https://api.example.com/data')
    const posts = await data.json()
    
    return <div>{posts.map(post => <p key={post.id}>{post.title}</p>)}</div>
}

增量静态再生 (ISR)

tsx

async function Page() {
    const data = await fetch('https://api.example.com/data', {
        next: { revalidate: 60 }
    })
    const posts = await data.json()
    
    return <div>{posts.map(post => <p key={post.id}>{post.title}</p>)}</div>
}

2.2 文件系统路由 #

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

text

app/
├── page.tsx              → /
├── about/
│   └── page.tsx          → /about
├── blog/
│   ├── page.tsx          → /blog
│   └── [slug]/
│       └── page.tsx      → /blog/:slug
└── dashboard/
    └── page.tsx          → /dashboard

2.3 React Server Components #

Next.js 13+ 全面支持 React Server Components：

tsx

async function ServerComponent() {
    const data = await fetch('https://api.example.com/data')
    const result = await data.json()
    
    return <div>{result.title}</div>
}

'use client'

function ClientComponent() {
    const [count, setCount] = useState(0)
    
    return <button onClick={() => setCount(count + 1)}>{count}</button>
}

2.4 API路由 #

内置 API 路由支持，轻松构建全栈应用：

tsx

import { NextResponse } from 'next/server'

export async function GET(request: Request) {
    const data = { message: 'Hello from API' }
    return NextResponse.json(data)
}

export async function POST(request: Request) {
    const body = await request.json()
    return NextResponse.json({ received: body })
}

2.5 内置优化 #

图片优化

tsx

import Image from 'next/image'

function Hero() {
    return (
        <Image
            src="/hero.png"
            alt="Hero image"
            width={1200}
            height={600}
            priority
        />
    )
}

字体优化

tsx

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
    return (
        <html lang="zh">
            <body className={inter.className}>{children}</body>
        </html>
    )
}

脚本优化

tsx

import Script from 'next/script'

function Analytics() {
    return (
        <Script
            src="https://analytics.example.com/script.js"
            strategy="afterInteractive"
        />
    )
}

三、应用场景 #

3.1 企业官网与营销页面 #

tsx

export default async function HomePage() {
    const features = await getFeatures()
    
    return (
        <main>
            <Hero />
            <Features data={features} />
            <Testimonials />
            <Contact />
        </main>
    )
}

特点：

SEO友好
加载速度快
易于维护

3.2 电商平台 #

tsx

export default async function ProductPage({ params }) {
    const product = await getProduct(params.id)
    
    return (
        <div>
            <ProductImages images={product.images} />
            <ProductInfo product={product} />
            <AddToCart productId={product.id} />
        </div>
    )
}

特点：

动态路由
ISR更新商品信息
良好的用户体验

3.3 博客与内容平台 #

tsx

export async function generateStaticParams() {
    const posts = await getPosts()
    return posts.map(post => ({ slug: post.slug }))
}

export default async function BlogPost({ params }) {
    const post = await getPost(params.slug)
    
    return <Article content={post.content} />
}

特点：

静态生成
快速响应
SEO优化

3.4 SaaS应用 #

tsx

import { auth } from '@/auth'

export default async function Dashboard() {
    const session = await auth()
    
    if (!session) {
        redirect('/login')
    }
    
    const data = await getDashboardData(session.user.id)
    
    return <DashboardContent data={data} />
}

特点：

认证集成
动态内容
实时更新

3.5 管理后台 #

tsx

'use client'

export default function AdminPanel() {
    const { data, mutate } = useSWR('/api/admin/data')
    
    return (
        <div>
            <DataTable data={data} />
            <ActionButtons onRefresh={() => mutate()} />
        </div>
    )
}

特点：

客户端渲染
实时交互
丰富的UI组件

四、为什么选择Next.js #

4.1 与其他框架对比 #

特性	Next.js	Create React App	Vite + React	Nuxt.js
SSR	✅	❌	需配置	✅
SSG	✅	❌	需配置	✅
ISR	✅	❌	❌	✅
文件路由	✅	❌	❌	✅
API路由	✅	❌	❌	✅
RSC	✅	❌	❌	❌
零配置	✅	✅	✅	✅
基础框架	React	React	React	Vue

4.2 Next.js的优势 #

1. 开发体验优秀

bash

npx create-next-app@latest my-app
cd my-app
npm run dev

几秒钟就能启动一个完整的开发环境。

2. 生产就绪

自动代码分割
智能预加载
图片优化
字体优化

3. 灵活的渲染策略

根据页面特性选择最佳渲染方式：

text

首页 → SSG (静态生成)
商品页 → ISR (增量静态再生)
用户中心 → SSR (服务端渲染)
管理后台 → CSR (客户端渲染)

4. 强大的生态系统

Vercel 部署平台
Next.js 学习课程
丰富的示例项目
活跃的社区

4.3 适用人群 #

角色	收益
React开发者	无缝迁移，功能增强
全栈开发者	前后端一体化开发
初学者	零配置，学习曲线平缓
企业团队	规范化，可维护性强

五、Next.js学习路线 #

5.1 初级阶段 #

理解Next.js基础概念
掌握文件系统路由
学习页面和布局
了解数据获取方式

5.2 中级阶段 #

深入渲染策略
掌握API路由
学习样式处理
理解缓存机制

5.3 高级阶段 #

性能优化
中间件应用
国际化
部署与监控

六、版本说明 #

本教程基于 Next.js 15 编写：

版本	状态	说明
Next.js 15.x	推荐	最新稳定版，Turbopack稳定
Next.js 14.x	维护	Server Actions稳定版
Next.js 13.x	维护	App Router引入
Next.js 12.x	EOL	旧版本

七、总结 #

Next.js 核心特点：

特点	说明
全栈框架	前后端一体化
多种渲染	SSR/SSG/ISR/CSR
零配置	开箱即用
React生态	无缝集成
生产优化	性能卓越

学习建议：

有React基础更容易上手
理解服务端与客户端的区别
多动手实践
关注官方文档更新

下一步，让我们开始搭建 Next.js 开发环境！