ZhenYu's 知识库

外观

基础知识

约 1075 字大约 4 分钟

reactnextjs

2026-04-08

官网：https://nextjs.org/docs

1. 什么是 Next.js

Next.js 是一个基于 React 的全栈框架，提供了开箱即用的能力：

  • 文件系统路由
  • 服务端渲染 SSR
  • 静态生成 SSG
  • 增量静态更新 ISR
  • API / Route Handlers
  • 图片、字体、脚本优化
  • 服务端与客户端组件协作

当前主流开发方式以 App Router 为主，它基于 app/ 目录组织路由和布局。

2. 快速创建项目

根据 Next.js 官方文档，当前推荐使用 create-next-app@latest 创建项目。

pnpm create next-app@latest my-app
cd my-app
pnpm dev

常用脚本：

pnpm dev
pnpm build
pnpm start
pnpm lint

说明：

  • dev：本地开发
  • build：生产构建
  • start：启动生产服务
  • lint：执行 ESLint 检查

3. 目录结构

典型 App Router 项目结构：

my-app/
├─ app/
│  ├─ layout.tsx
│  ├─ page.tsx
│  ├─ dashboard/
│  │  └─ page.tsx
│  ├─ api/
│  │  └─ hello/
│  │     └─ route.ts
├─ public/
├─ next.config.ts
├─ package.json
└─ tsconfig.json

关键目录说明：

  • app/：核心路由目录
  • layout.tsx：布局文件，可复用页面框架
  • page.tsx：页面入口
  • loading.tsx：路由加载态
  • error.tsx：路由级错误处理
  • not-found.tsx：404 页面
  • route.ts：接口或自定义请求处理
  • public/：静态资源目录

4. 路由基础

Next.js 使用文件系统路由：

app/page.tsx                 -> /
app/about/page.tsx          -> /about
app/blog/[slug]/page.tsx    -> /blog/:slug
app/shop/[...parts]/page.tsx -> /shop/*

常见能力：

  • 动态路由：[id]
  • 捕获路由：[...slug]
  • 可选捕获路由：[[...slug]]
  • 嵌套路由：通过目录结构自然形成
  • 共享布局：通过 layout.tsx 复用

页面跳转通常使用 next/link：

import Link from 'next/link'

export default function HomePage() {
  return <Link href="/about">About</Link>
}

5. Server Component 与 Client Component

在 App Router 中，组件默认是 Server Component。

特点：

  • 运行在服务端
  • 适合数据获取
  • 不会把这部分组件逻辑直接打进浏览器包
  • 不能直接使用浏览器事件和 React 客户端 Hook

如果组件需要使用 useState、useEffect、点击事件等浏览器交互，需要显式声明：

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

判断原则：

  • 偏展示、偏数据读取：优先 Server Component
  • 偏交互、偏浏览器状态：使用 Client Component

6. 数据获取

在 Server Component 中可以直接使用 fetch：

export default async function Page() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 },
  })
  const posts = await res.json()

  return <pre>{JSON.stringify(posts, null, 2)}</pre>
}

常见模式：

  • 静态渲染：构建时生成页面
  • 动态渲染：请求时生成页面
  • ISR：页面缓存一段时间后重新验证

常见配置：

  • cache: 'no-store'：每次请求都重新获取
  • next: { revalidate: 60 }：60 秒后允许重新验证缓存

7. 渲染方式理解

Next.js 常见渲染模式：

  • CSR：客户端渲染，浏览器拿到 JS 后再渲染
  • SSR：服务端按请求生成 HTML
  • SSG：构建阶段生成静态页面
  • ISR：静态页面支持按时间或条件更新

选择建议：

  • 营销官网、文档站：优先 SSG / ISR
  • 后台系统、个性化页面：SSR 或动态渲染
  • 强交互局部模块：客户端组件配合 CSR

8. 常用内置能力

8.1 图片优化

使用 next/image：

import Image from 'next/image'

export default function Avatar() {
  return (
    <Image
      src="/avatar.png"
      alt="avatar"
      width={120}
      height={120}
    />
  )
}

优点：

  • 自动懒加载
  • 自适应尺寸
  • 图片优化

8.2 字体优化

使用 next/font 可以自动完成字体加载优化。

8.3 Metadata

可以在页面或布局中导出 metadata 配置 SEO 信息。

export const metadata = {
  title: 'Dashboard',
  description: 'Admin dashboard',
}

8.4 Route Handlers

在 app/api/**/route.ts 中编写接口：

export async function GET() {
  return Response.json({ ok: true })
}

9. 环境变量

本地开发常见文件：

  • .env.local
  • .env.development
  • .env.production

前端可访问的变量需要以 NEXT_PUBLIC_ 开头，例如：

NEXT_PUBLIC_API_BASE_URL=https://api.example.com

不要把敏感密钥暴露为 NEXT_PUBLIC_*。

10. 开发建议

  • 新项目优先使用 App Router
  • 默认先写 Server Component，再按需拆出 Client Component
  • 将数据获取尽量放在服务端
  • 使用 loading.tsx 和 error.tsx 提升体验
  • 对外站点优先考虑 SEO、缓存和图片优化
  • 部署时优先选择 Vercel，配置成本最低

11. 适用场景

Next.js 适合：

  • 官网和营销页
  • 博客与文档站
  • SaaS 后台
  • 电商前台
  • 需要 SEO 的 React 应用
  • 需要服务端接口和前端一体化开发的项目

12. 参考资料