# Next.js 应用路由器专家 ## 概述 Next.js 14/15 App Router 架构、React 服务器组件 (RSC)、服务器操作和现代全栈 React 开发方面的专家。专注于路由模式、数据获取策略、缓存、流式传输和部署优化。 ## 何时使用 * 使用 App Router 启动一个新的 Next.js 项目 * 从页面路由器迁移到应用程序路由器 * 实现复杂的路由模式（并行、拦截路由） * 使用 RSC 和缓存优化数据获取 * 为突变设置服务器操作 * 配置身份验证/重定向中间件 * 调试水合错误或 RSC 问题 * 部署到 Vercel、Cloudflare 或自托管 ## 能力 ### 路由架构 * 使用 `app/` 目录的基于文件的路由 * 动态路由（`[slug]`、`[...catchAll]`、`[[...可选]]`） * 用于组织的路由组`(group)` * 并行路线`@modal`、`@sidebar` * 拦截路由 `(.)`, `(..)`, `(..)(..)` * 每个路线段的负载和错误边界 ### React 服务器组件 * 服务器与客户端组件的边界 *“使用客户端”指令放置 * 组合模式（服务器包装客户端） * 带有悬念边界的流媒体 * 渐进式渲染策略 ### 数据获取 * `fetch()` 具有自动重复数据删除功能 * 缓存策略（`force-cache`、`no-store`、`revalidate`） * `generateStaticParams()` 用于静态生成 * 增量静态再生（ISR） * 使用 `revalidatePath()` / `revalidateTag()` 进行按需重新验证 ### 服务器操作 * 使用“使用服务器”形成突变 * 使用 `useOptimistic` 进行乐观更新 * 渐进增强（无需 JS 即可工作） * 错误处理和验证 * 突变后重定向 ### 中间件和边缘 * `middleware.ts` 用于身份验证、重定向、重写 * Edge 运行时与 Node.js 运行时 * 地理位置和条件路由 * A/B 测试和功能标志 ### 性能优化 * 使用“next/image”优化图像 * 使用“next/font”优化字体 * 脚本加载策略 * 包分析和代码分割 * 部分预渲染 (PPR) ## 依赖关系适用于： * `react-performance-optimizer` \- React 特定的性能模式 * `vercel-deployment` \- Vercel 部署配置 * `cloudflare-worker-dev` \- 边缘部署模式 * `postgresql-optimization` \- RSC 的数据库查询 ## 示例 ### 基本路由结构应用程序/ ├──layout.tsx # 根布局（必填） ├── page.tsx # 主页 (/) ├──loading.tsx # 加载UI ├── error.tsx # 错误边界 ├── not-found.tsx # 404页 ├── 博客/ │ ├── page.tsx # /blog │ └── [蛞蝓]/ │ ├── page.tsx # /blog/:slug │ └── loading.tsx # 按路由加载 └── (auth)/ # 路由组（无 URL 影响） ├── 登录/ │ └── page.tsx # /登录 └── 注册/ └── page.tsx # /注册 ### 具有数据获取功能的服务器组件 // 应用程序/帖子/page.tsx 从'react'导入{Suspense}；异步函数 getPosts() { const res = 等待 fetch('https://api.example.com/posts', { next: { revalidate: 3600 }, // ISR: 每小时重新验证 }); 返回 res.json(); } 导出默认异步函数 PostsPage() { const posts = 等待 getPosts(); 返回（ <主要>

博客文章

<悬念后备={}> ）； } ### 服务器操作表单 // 应用程序/联系人/page.tsx 从“下一步/导航”导入{重定向}；从'next/cache'导入{revalidatePath}；异步函数submitContact(formData: FormData) { '使用服务器'； const email = formData.get('email') as string; const message = formData.get('message') as string; // 验证 if (!email || !message) { throw new Error('需要电子邮件和消息'); } // 保存到数据库等待 db.contacts.create({ 电子邮件, 消息 }); // 重新验证并重定向 revalidatePath('/contact'); 重定向（'/联系/成功'）； } 导出默认函数 ContactPage() { 返回（ <表单操作={提交联系人}> <输入名称=“电子邮件”类型=“电子邮件”必需/>

<button type="submit">发送</button>
        </形式>
      ）；
    }

### 并行路由（模态模式）
    
    
    应用程序/
    ├── 布局.tsx
    ├── 页.tsx
    ├── @modal/
    │ ├── default.tsx # 无模态时为空状态
    │ └── (.)照片/[id]/
    │ └── page.tsx # 拦截 /photo/[id] 作为模态
    └── 照片/[id]/
        └── page.tsx # 直接导航时的整页
    
    
    
    // 应用程序/layout.tsx
    导出默认函数Layout({
      孩子们，
      模态,
    }：{
      孩子：React.ReactNode；
      模态：React.ReactNode；
    }) {
      返回（
        <>
          {孩子}
          {模态}
        </>
      ）；
    }

### 身份验证中间件
    
    
    // 中间件.ts
    从'next/server'导入{NextResponse}；
    从 'next/server' 导入类型 { NextRequest }；
    
    导出函数中间件（请求：NextRequest）{
      const token = request.cookies.get('auth-token');
      const isAuthPage = request.nextUrl.pathname.startsWith('/login');
      const isProtectedPage = request.nextUrl.pathname.startsWith('/dashboard');
    
      // 重定向经过身份验证的用户，使其不再登录
      if (isAuthPage && 令牌) {
        return NextResponse.redirect(new URL('/dashboard', request.url));
      }
    
      // 重定向未经身份验证的用户登录
      if (isProtectedPage && !token) {
        return NextResponse.redirect(new URL('/login', request.url));
      }
    
      返回 NextResponse.next();
    }
    
    导出常量配置= {
      匹配器: ['/dashboard/:path*', '/login'],
    };

### 具有动态参数的静态生成
    
    
    // 应用程序/博客/[slug]/page.tsx
    从 'next/navigation' 导入 { notFound }；
    
    导出异步函数generateStaticParams() {
      const posts = wait fetch('https://api.example.com/posts').then(r => r.json());
    
      返回 posts.map((post: { slug: string }) => ({
        slug：post.slug，
      }));
    }
    
    导出异步函数generateMetadata({ params }: { params: { slug: string } }) {
      const post =等待 getPost(params.slug);
    
      返回{
        标题：帖子？.标题？？ '找不到帖子'，
        描述：帖子？.摘录，
      };
    }
    
    导出默认异步函数 PostPage({ params }: { params: { slug: string } }) {
      const post =等待 getPost(params.slug);
    
      如果（！post）{
        未找到（）；
      }
    
      返回（
        <文章>
          <h1>{帖子.标题}</h1>
          {/* 注意：在渲染之前始终使用 DOMPurify 清理 HTML 内容 */}
          <div>{post.content}</div>
        </文章>
      ）；
    }

### 充满悬念的直播
    
    
    // 应用程序/仪表板/page.tsx
    从'react'导入{Suspense}；
    
    导出默认函数 DashboardPage() {
      返回（
        <div className="网格 grid-cols-2 间隙-4">
          {/* 这些并行加载并在就绪时流式传输 */}
          <悬念后备={<CardSkeleton />}>
            <收入卡/>
          </悬念>
          <悬念后备={<CardSkeleton />}>
            <用户卡/>
          </悬念>
          <Suspense Fallback={<TableSkeleton />}>
            <最近订单/>
          </悬念>
        </div>
      ）；
    }
    
    // 每个组件获取自己的数据
    异步函数 RevenueCard() {
      const 收入 = 等待 getRevenue(); // 服务器端获取
      return <Card title="收入" value={收入} />;
    }

## 最佳实践

1. **默认服务器组件** \- 仅在需要交互时添加“使用客户端”
  2. **并置数据获取** \- 在需要它的组件中获取数据
  3. **使用 Suspense 边界** \- 包装异步组件以进行流式处理
  4. **利用缓存** \- 使用 `revalidate` 和标签进行高效缓存
  5. **渐进增强** \- 服务器操作无需 JavaScript 即可工作
  6. **用于组织的路由组** \- 使用 `(folder)` 进行组织而不影响 URL
  7. **每段错误边界** \- 将 `error.tsx` 添加到关键路由
  8. **元数据 API** \- 使用 `generateMetadata` 进行动态 SEO
  9. **清理用户内容** \- 渲染 HTML 时始终使用 DOMPurify 或类似工具

## 常见陷阱

* **水合不匹配** \- 服务器/客户端渲染差异（日期、随机值）
  * **过度使用“使用客户端”** \- 将客户端边界推得太高
  * **瀑布获取** \- 不并行化独立数据获取
  * **缺少加载状态** \- 忘记 `loading.tsx` 或 Suspense 边界
  * **过时数据** \- 突变后不使缓存失效
  * **大型客户端捆绑包** \- 在客户端组件中导入仅服务器代码
  * **XSS 漏洞** \- 从用户输入中呈现未经净化的 HTML</article></body></html>

Nextjs 应用路由器专家

包含技能