Next.js系统性教学：拦截路由与路由处理器

 更多有关Next.js教程，请查阅：

【目录】Next.js 独立开发系列教程-CSDN博客

---

目录

1. 路由拦截 (Intercepting Routes)

1.1 什么是路由拦截？

1.2 配置拦截路由

1.3 示例：模态框预览

1.4 使用场景

2. 路由处理器 (Route Handlers)

2.1 什么是路由处理器？

2.2 配置路由处理器

2.3 示例：简单的 GET 和 POST 处理

2.4 路由处理器中的动态参数

2.5 高级用法：流式响应

2.6 使用场景

3. 路由拦截与路由处理器的结合

4. 总结

  独立开发系列文章目录

Next.js系统性学习系列文章目录

---

在现代 Web 应用开发中，灵活的路由机制 是框架的重要功能之一。Next.js 提供了强大的路由工具，例如 路由拦截 (Intercepting Routes) 和 路由处理器 (Route Handlers)，允许开发者更精细地控制用户导航和请求响应。本文将深入讲解这两个特性，并通过实例展示它们的实际应用。

---

1. 路由拦截 (Intercepting Routes)

1.1 什么是路由拦截？

路由拦截允许开发者在导航到特定路由时加载额外的用户界面，同时保留当前的上下文。例如：

• 弹出模态框预览新页面的内容。
• 在不离开主页面的情况下展示嵌套信息。

这一功能通常用于增强用户体验，避免频繁的页面跳转。

---

1.2 配置拦截路由

在 Next.js 中，使用 (..) 文件夹定义拦截路由。这个文件夹的路径会被解释为需要拦截的目标页面。

目录结构：

app/
├── dashboard/
│   ├── page.js
│   ├── (..)modal/
│   │   ├── page.js

当用户从 dashboard 页面导航到某个路径时，(..) 中的内容会以嵌套形式呈现，而不影响当前页面上下文。

---

1.3 示例：模态框预览

主页面：app/dashboard/page.js

export default function Dashboard() {return (<main><h1>仪表盘</h1><a href="/dashboard/(..)/modal">打开模态框</a></main>);
}

模态框页面：app/dashboard/(..)/modal/page.js

export default function Modal() {return (<div style={{ background: 'rgba(0, 0, 0, 0.8)', padding: '20px' }}><h2>模态框内容</h2><a href="/dashboard">关闭</a></div>);
}

运行效果：

• 当用户点击 “打开模态框” 时，modal 页面会以模态框的形式覆盖在 dashboard 页面上。
• (..) 确保页面导航保持平滑，无需完全重新加载主页面。

---

1.4 使用场景

• 内容预览：例如博客文章摘要或商品详情。
• 弹窗形式的表单：如登录或评论表单。
• 分步流程：用户在浏览过程中临时查看其他页面信息。

---

2. 路由处理器 (Route Handlers)

2.1 什么是路由处理器？

路由处理器允许开发者直接在路由中处理 HTTP 请求，而不需要通过 API 路径。这种机制非常适合需要动态响应内容或处理特定请求的场景，例如：

• 根据参数动态生成文件。
• 在页面中嵌入微型 API。

---

2.2 配置路由处理器

在 app 目录下，路由处理器通过 route.js 或 route.ts 文件实现。处理器文件与页面文件共存，但专注于处理网络请求。

目录结构：

app/
├── api/
│   ├── hello/
│   │   ├── route.js

以上配置会创建一个 API 路径 /api/hello，可以直接接收和响应 HTTP 请求。

---

2.3 示例：简单的 GET 和 POST 处理

GET 请求：

export async function GET(request) {return new Response(JSON.stringify({ message: "Hello, Next.js!" }), {headers: { "Content-Type": "application/json" },});
}

访问 /api/hello 将返回 JSON 响应：{ "message": "Hello, Next.js!" }。

POST 请求：

export async function POST(request) {const data = await request.json();return new Response(JSON.stringify({ message: `You sent: ${data.text}` }),{headers: { "Content-Type": "application/json" },});
}

通过 POST 请求发送 { "text": "Hello" }，会收到响应：{ "message": "You sent: Hello" }。

---

2.4 路由处理器中的动态参数

路由处理器也支持动态参数，与动态页面的实现类似。

目录结构：

app/
├── api/
│   ├── [id]/
│   │   ├── route.js

示例代码：app/api/[id]/route.js

export async function GET(request, { params }) {const { id } = params;return new Response(JSON.stringify({ id }), {headers: { "Content-Type": "application/json" },});
}

访问 /api/123 将返回 { "id": "123" }。

---

2.5 高级用法：流式响应

Next.js 路由处理器支持流式响应，适合用来发送大型数据或实时更新。

export async function GET() {const encoder = new TextEncoder();const stream = new ReadableStream({start(controller) {controller.enqueue(encoder.encode("开始流式传输...\n"));setTimeout(() => controller.enqueue(encoder.encode("继续传输...\n")), 1000);setTimeout(() => controller.close(), 2000);},});return new Response(stream, {headers: { "Content-Type": "text/plain" },});
}

访问路径时，浏览器将逐步接收数据流。

---

2.6 使用场景

• 动态内容生成：如生成 PDF、CSV 文件。
• 嵌入式 API：在页面中直接提供与特定页面相关的 API。
• 实时更新：通过流式传输为客户端提供实时数据。

---

3. 路由拦截与路由处理器的结合

两者可以结合使用，进一步增强页面的动态性和交互性。

示例：

• 使用路由拦截加载模态框。
• 通过路由处理器提供模态框需要的数据。

目录结构：

app/
├── dashboard/
│   ├── page.js
│   ├── (..)modal/
│   │   ├── page.js
│   ├── (..)modal/
│   │   ├── route.js

modal/page.js：

export default function Modal({ data }) {return (<div><h1>模态框内容</h1><p>{data.message}</p></div>);
}

modal/route.js：

export async function GET() {return new Response(JSON.stringify({ message: "这是动态加载的模态框数据" }), {headers: { "Content-Type": "application/json" },});
}

---

4. 总结

• 路由拦截 提供了一种优雅的方式展示弹窗和嵌套内容，提升用户体验。
• 路由处理器 是灵活处理 HTTP 请求的工具，适用于动态内容生成和实时响应。
• 结合使用这两种特性，可以显著提升应用的动态性、交互性和性能。

通过掌握这些高级路由技巧，开发者可以用 Next.js 打造功能更丰富、用户体验更出色的应用。

 更多有关Next.js教程，请查阅：

【目录】Next.js 独立开发系列教程-CSDN博客