跳到主要内容

Next.js

Node.js版本要求​

  • Node.js 18.18或更高版本

创建 Next.js 项目​

npx create-next-app@latest

目录结构​

├── pages                 // Pages router
├── app                   // App router
│   ├── layout                            // 路由文件  .js .jsx .tsx 布局
│   ├── page                              // 路由文件  .js .jsx .tsx 页面
│   ├── loading                           // 路由文件  .js .jsx .tsx 加载页面
│   ├── not-found                         // 路由文件  .js .jsx .tsx 404页面
│   ├── error                             // 路由文件  .js .jsx .tsx 错误页面
│   ├── global-error                      // 路由文件  .js .jsx .tsx 全局错误页面
│   ├── route                             // 路由文件  .js .ts API 端点
│   ├── template                          // 路由文件  .js .jsx .tsx 重新渲染的布局
│   ├── default                           // 路由文件  .js .jsx .tsx 并行路由回退页面
├── public                                // 静态资源
├── next.config.js                        // Next.js 的配置文件
├── package.json                          // 项目依赖和脚本
├── instrumentation.ts                    // OpenTelemetry 和检测文件
├── middleware.ts                         // Next.js 请求中间件
├── .env                                  // 环境变量
├── .env.local                            // 本地环境变量
├── .env.production                       // 生产环境变量
├── .env.development                      // 开发环境变量
├── .eslintrc.json                        // ESLint 的配置文件
├── .gitignore                            // Git 要忽略的文件和文件夹
├── next-env.d.ts                         // Next.js 的 TypeScript 声明文件
├── tsconfig.json                         // TypeScript 的配置文件
├── jsconfig.json                         // JavaScript 的配置文件

App Router​

官方文档

Next.js App Router 用文件夹定义路由

layout布局文件​

根布局是必需文件，若没有，next build会自动生成

支持嵌套布局，兄弟布局之间切换，其同一个父布局不重新渲染

page页面文件​

路由必需文件，若没有，则表示当前非路由文件夹

导航​

  • Link组件
import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">仪表盘</Link>
}
  • useRouter() 客户端组件中使用
'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      仪表盘
    </button>
  )
}
  • redirect() 服务端组件中使用
import { redirect } from 'next/navigation'
 
async function fetchTeam(id: string) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }: { params: { id: string } }) {
  const team = await fetchTeam(params.id)
  if (!team) {
    redirect('/login')
  }
 
  // ...
}

App Router 与 Pages Router 区别​

Pages Router（基于文件的路由系统）​

  • 路径映射：文件系统中的 .js 或 .ts 文件自动映射到路由路径。
  • 文件路径：pages/index.js → 路径：/
  • 文件路径：pages/about.js → 路径：/about
  • 渲染方式：
    • 支持 getStaticProps、getServerSideProps 和 getInitialProps。
    • 比较适合单个页面的静态生成 (SSG) 和服务端渲染 (SSR)。
  • 布局管理：没有内置布局概念，需手动通过组件或 HOC 实现。
  • 动态路由：通过文件名实现，例如 [id].js → /post/:id。
  • 中间件：需要配合自定义 _middleware 文件实现（支持较少）。
  • 状态管理：无内置的状态管理工具，需要手动引入。
  • 适用场景：经典的传统开发模式，适合小型或迁移项目。

App Router（新的文件夹路由系统）​

  • 路径映射：基于文件夹的结构，主要以 app 文件夹为根目录。
  • 文件夹：app/page.js → 路径：/
  • 文件夹：app/about/page.js → 路径：/about
  • 渲染方式：
    • 默认支持 React 服务器组件（Server Components）。
    • 更细粒度的 SSR/SSG 控制。
    • 支持渐进式页面加载（Streaming）。
  • 布局管理：
    • 引入了 layout.js 文件，可定义共享布局，自动作用于子路由。
    • 文件路径：app/layout.js → 全局布局。
    • 动态路由：通过文件夹实现，例如 [id] → /post/:id。
    • 中间件：更现代化的 API，例如直接处理 API 请求。
  • 状态管理：
    • 结合 React 18 特性，自带流式（streaming）渲染。
    • 适用场景：为现代 React 应用设计，适合大型项目和需要高性能的应用。

区别​

特性Pages RouterApp Router
文件夹位置pagesapp
布局支持无内置布局支持多层级布局，layout.js 实现
默认组件模式客户端组件默认为服务器组件；如果需要使用客户端组件，只需在文件顶部添加特殊指令：'use client'
动态路由文件名 [id].js文件夹 [id]
SEO 和元数据管理自定义 <Head> 组件使用 metadata 属性
性能优化传统 SSR 和 SSG支持流式渲染（Streaming）
适用场景简单应用或需要向后兼容的项目复杂应用，适合现代 React 架构

总结： 如果是新项目，建议使用 App Router，它更现代化，支持最新的 React 功能。 如果是迁移或小型项目，Pages Router 可能更简单直接。