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

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

---

目录

1. 加载界面与流式渲染

1.1 加载界面 (loading.js)

1.2 流式渲染

2. 路由重定向

2.1 基于服务器的重定向

2.2 动态重定向

2.3 中间件中的重定向

3. 路由分组

3.1 路由分组的基本使用

3.2 在分组中共享布局

3.3 嵌套分组

3.4 匿名路由分组

4. 最佳实践

5. 总结

 独立开发系列文章目录

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

---

Next.js 提供了一套强大且灵活的路由系统，帮助开发者快速构建现代化 Web 应用。本教程将围绕 加载界面与流式渲染、重定向以及路由分组展开深入讲解，助您掌握这些工具并提升开发效率和用户体验。

---

1. 加载界面与流式渲染

现代 Web 应用对性能和用户体验的要求越来越高。Next.js 通过加载界面和流式渲染提供了更好的体验，确保页面内容以最快的速度呈现给用户。

1.1 加载界面 (loading.js)

loading.js 文件允许开发者为某个路由或页面定义一个加载状态。当页面内容尚未完全加载时，loading.js 中的组件会被显示，直到加载完成。

目录结构：

app/
├── dashboard/
│   ├── page.js
│   ├── loading.js

示例代码：app/dashboard/loading.js

export default function Loading() {return <p>正在加载，请稍候...</p>;
}

• 当用户访问 /dashboard 时，如果数据或页面仍在加载，浏览器会优先显示 loading.js 中的内容。
• 此机制提高了用户体验，避免长时间的白屏等待。

---

1.2 流式渲染

Next.js 支持流式渲染 (Streaming)，允许服务器将页面部分内容先行返回并呈现，而不是等待所有数据加载完成。这对于加载大数据量的页面非常有用。

示例代码：app/page.js

export default async function HomePage() {const data = await fetchSomeData(); // 假设这是一个耗时的操作return (<main><h1>首页</h1>{data.map((item) => (<p key={item.id}>{item.name}</p>))}</main>);
}

• 页面在获取 fetchSomeData() 数据时，可以先渲染其他部分，如 h1 标题。
• 这使得用户可以快速看到部分页面内容，而无需等待完整数据。

---

2. 路由重定向

路由重定向是 Web 开发中的常见需求，例如在用户登录后将其重定向到仪表盘页面，或者为旧的 URL 提供新的跳转目标。Next.js 提供多种方式实现路由重定向。

2.1 基于服务器的重定向

服务器端重定向可以通过在 app 目录的 page.js 文件中使用 redirect() 方法实现。

示例代码：app/page.js

import { redirect } from "next/navigation";export default function HomePage() {const isLoggedIn = false; // 假设这是登录状态检查if (!isLoggedIn) {redirect("/login");}return <h1>欢迎回来！</h1>;
}

• redirect()：将用户直接导航到指定路径。
• 此方法适用于需要根据某些条件进行页面跳转的场景，例如权限验证。

---

2.2 动态重定向

Next.js 支持动态路径的重定向，例如将 /old-page 重定向到 /new-page。

示例代码：next.config.js

module.exports = {async redirects() {return [{source: "/old-page",destination: "/new-page",permanent: true,},];},
};

• source：定义旧路径。
• destination：定义目标路径。
• permanent：如果为 true，会返回 HTTP 状态码 308，适用于永久性跳转。

这种配置适合全局的静态重定向需求，且与服务器无关。

---

2.3 中间件中的重定向

Next.js 中间件 (Middleware) 提供了基于请求的动态处理能力，适合更复杂的场景。

示例代码：middleware.js

import { NextResponse } from "next/server";export function middleware(req) {const url = req.nextUrl.clone();if (url.pathname === "/old-path") {url.pathname = "/new-path";return NextResponse.redirect(url);}
}

此方法允许开发者在应用逻辑中动态地管理请求路径和跳转。

---

3. 路由分组

Next.js 的路由分组功能可以组织复杂的应用目录结构，同时保持 URL 的清晰简洁。它通过 ( ) 包裹目录名实现分组，而不会影响最终生成的 URL。

3.1 路由分组的基本使用

目录结构：

app/
├── (dashboard)/
│   ├── layout.js
│   ├── analytics/
│   │   ├── page.js
│   ├── sales/
│   │   ├── page.js
├── page.js

• (dashboard) 是一个分组目录，不会出现在 URL 路径中。
• /analytics 和 /sales 会分别解析为 https://example.com/analytics 和 https://example.com/sales。

3.2 在分组中共享布局

可以为整个分组定义一个共享布局，提升代码复用性。

示例代码：app/(dashboard)/layout.js

export default function DashboardLayout({ children }) {return (<section><aside>仪表盘菜单</aside><main>{children}</main></section>);
}

• 分组内所有页面都会继承 DashboardLayout 的结构和样式。

---

3.3 嵌套分组

Next.js 允许在分组中嵌套其他分组，便于构建复杂的页面结构。

目录结构：

app/
├── (marketing)/
│   ├── blog/
│   │   ├── page.js
│   ├── about/
│   │   ├── page.js
├── (dashboard)/
│   ├── settings/
│   │   ├── page.js
│   ├── profile/
│   │   ├── page.js

• (marketing) 和 (dashboard) 是两个独立的分组，各自管理自己的页面。
• 嵌套分组可以进一步细化应用逻辑。

---

3.4 匿名路由分组

匿名路由分组是使用 () 包裹的分组目录，但不会对外暴露任何路径。例如：

目录结构：

app/
├── (shared-layout)/
│   ├── layout.js
├── dashboard/
│   ├── page.js

• (shared-layout) 中的内容会被 dashboard 和其他页面共享，但它不会影响 URL 路径。

---

4. 最佳实践

1. 流畅加载界面：为每个关键路由定义 loading.js，减少用户等待时的感知延迟。
2. 精准重定向：根据需求选择动态重定向或全局静态配置，避免复杂的路径管理。
3. 灵活分组：利用路由分组简化复杂目录结构，同时保持 URL 的简洁。
4. 流式渲染优先：对于大数据页面，优先采用流式渲染，提升用户体验。

---

5. 总结

Next.js 在加载界面、重定向与路由分组方面提供了强大且灵活的功能。这些特性不仅提高了开发效率，也优化了用户体验。通过合理运用这些工具，开发者可以构建出结构清晰、性能优越的现代 Web 应用。

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

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