Next.js 并行路由：构建动态页面布局

Next.js 作为领先的 React 框架，不断发展，为开发者提供了构建现代 Web 应用的强大工具。最新版本中引入的最激动人心的功能之一是并行路由 (Parallel Routes)。此功能允许您在同一页面布局中渲染多个独立的部分，为您的应用程序结构和用户体验提供了无与伦比的灵活性和控制力。

什么是并行路由？

传统上，Next.js 中的一个路由对应一个单一的页面组件。当您导航到不同的路由时，整个页面会被重新渲染。并行路由打破了这一模式，它允许您在同一个布局中同时渲染多个组件，每个组件都由其自己独立的路由段管理。可以将其想象成将您的页面划分为不同的区域，每个区域都有自己的 URL 和生命周期，并且都在同一个屏幕上共存。

这为创建更复杂、更动态的用户界面开启了许多可能性。例如，您可以使用并行路由来实现：

• 在主内容旁边显示一个持久的导航栏。
• 实现模态窗口或侧边栏，而不影响主页面流程。
• 创建带有独立小部件的仪表盘，这些小部件可以分别加载和更新。
• 对组件的不同版本进行 A/B 测试，而不影响整体页面结构。

理解概念：插槽 (Slots)

并行路由背后的核心概念是“插槽”。插槽是布局中的一个命名区域，用于渲染特定的路由段。您可以在您的 app 目录中使用 @ 符号后跟插槽名称来定义这些插槽。例如，@sidebar 代表一个名为“sidebar”的插槽。

然后，每个插槽都可以与一个路由段相关联。当用户导航到特定路由时，Next.js 会将与该路由段关联的组件渲染到布局中相应的插槽中。

实现：一个实践示例

让我们通过一个实际的例子来说明并行路由是如何工作的。假设您正在构建一个电子商务应用程序，并且您希望在产品详情页面上显示一个持久的购物车侧边栏。

1. 目录结构

首先，让我们定义应用程序的目录结构：

app/
  product/
    [id]/
      @cart/
        page.js  // 购物车组件
      page.js      // 产品详情组件
    layout.js   // 产品布局
  layout.js     // 根布局

以下是每个文件的作用：

• app/layout.js: 整个应用程序的根布局。
• app/product/[id]/layout.js: 特定于产品详情页面的布局。我们在这里定义插槽。
• app/product/[id]/page.js: 主要的产品详情组件。
• app/product/[id]/@cart/page.js: 购物车组件，它将被渲染到 @cart 插槽中。

2. 根布局 (app/layout.js)

根布局通常包含在整个应用程序中共享的元素，例如页眉和页脚。

// app/layout.js
export default function RootLayout({ children }) {
  return (
    
      
        
我的电商应用
        {children}
        
      
    
  );
}

3. 产品布局 (app/product/[id]/layout.js)

这是我们定义插槽的关键部分。我们通过 props 接收主产品页面和购物车的组件，它们分别对应 page.js 和 @cart/page.js。

// app/product/[id]/layout.js
export default function ProductLayout({ children, cart }) {
  return (
    

      
{children}
      
    
  );
}

在这个例子中，我们使用一个简单的 flexbox 布局来并排定位主产品内容和购物车侧边栏。children prop 将包含 app/product/[id]/page.js 的渲染输出，而 cart prop 将包含 app/product/[id]/@cart/page.js 的渲染输出。

4. 产品详情页面 (app/product/[id]/page.js)

这是一个标准的动态路由页面，它根据 id 参数显示产品详情。

// app/product/[id]/page.js
export default async function ProductDetails({ params }) {
  const { id } = params;
  // 根据 ID 获取产品数据
  const product = await fetchProduct(id);

  return (
    

      
产品详情
      
{product.name}
      
{product.description}
      
价格: ${product.price}
    
  );
}

async function fetchProduct(id) {
  // 请替换为您实际的数据获取逻辑
  return new Promise(resolve => setTimeout(() => {
    resolve({ id, name: `产品 ${id}`, description: `产品 ${id} 的描述`, price: 99.99 });
  }, 500));
}

5. 购物车组件 (app/product/[id]/@cart/page.js)

此组件代表购物车，将被渲染到 @cart 插槽中。

// app/product/[id]/@cart/page.js
export default function ShoppingCart() {
  return (
    

      
购物车
      
购物车中的商品： 3
      结算
    
  );
}

解释

当用户导航到 /product/123 时，Next.js 将：

1. 渲染根布局 (app/layout.js)。
2. 渲染产品布局 (app/product/[id]/layout.js)。
3. 在产品布局内，将产品详情组件 (app/product/[id]/page.js) 渲染到 children prop 中。
4. 同时，将购物车组件 (app/product/[id]/@cart/page.js) 渲染到 cart prop 中。

最终结果是一个带有持久购物车侧边栏的产品详情页面，所有内容都在一个布局中渲染。

使用并行路由的优势

• 改善用户体验： 使用持久元素和动态部分创建更具互动性和吸引力的用户界面。
• 提高代码可重用性： 更轻松地在不同路由之间共享组件和布局。
• 增强性能： 独立加载和更新页面的各个部分，减少整页重新渲染的需求。
• 简化开发： 通过更模块化和更有组织的结构来管理复杂的布局和交互。
• A/B 测试能力： 轻松测试特定页面部分的不同变体，而不会影响整个页面。

注意事项和最佳实践

• 路由冲突： 注意避免并行路由之间的路由冲突。每个路由段都应有其独特的用途，并且不应与其他段重叠。
• 布局复杂性： 虽然并行路由提供了灵活性，但过度使用可能导致难以维护的复杂布局。力求在灵活性和简单性之间取得平衡。
• SEO 影响： 考虑使用并行路由对 SEO 的影响，特别是当不同插槽中的内容差异很大时。确保搜索引擎能够正确抓取和索引内容。适当使用规范 URL。
• 数据获取： 谨慎管理数据获取，尤其是在处理多个独立部分时。考虑使用共享数据存储或缓存机制以避免冗余请求。
• 可访问性： 确保您的并行路由实现对所有用户都是可访问的，包括残障人士。使用适当的 ARIA 属性和语义化 HTML 来提供良好的用户体验。

高级用法：条件渲染和动态插槽

并行路由不仅限于静态插槽定义。您还可以使用条件渲染和动态插槽来创建更灵活的布局。

条件渲染

您可以根据用户角色、身份验证状态或其他因素，在插槽中有条件地渲染不同的组件。

// app/product/[id]/layout.js
import { getUserRole } from '../../utils/auth';

export default async function ProductLayout({ children, cart }) {
  const userRole = await getUserRole();

  return (
    

      
{children}
      
    
  );
}

function AdminPanel() {
  return (
    

      
管理面板
      
在此管理产品详情。
    
  );
}

在此示例中，如果用户具有“admin”角色，则会在 @cart 插槽中渲染一个 AdminPanel 组件，而不是购物车。

动态插槽

虽然不太常见，但理论上您*可以*动态构建插槽名称，但这通常不被鼓励，因为会增加复杂性和潜在的性能问题。最好还是坚持使用预定义且易于理解的插槽。如果确实需要动态“插槽”，可以考虑使用带有 props 和条件渲染的标准 React 组件等替代方案。

真实世界的示例和用例

让我们探讨一些并行路由在不同类型应用中的真实世界示例：

• 电子商务平台： 在产品详情或分类页面旁显示购物车、推荐商品或用户账户信息。
• 仪表盘： 创建带有独立小部件的仪表盘，用于显示指标、图表和报告。每个小部件都可以单独加载和更新，而不会影响整个仪表盘。例如，一个销售仪表盘可以在一个并行路由中显示地理数据，在另一个中显示产品性能，允许用户在无需整页刷新的情况下自定义他们看到的内容。
• 社交媒体应用： 在主信息流或个人资料页面旁显示聊天侧边栏或通知面板。
• 内容管理系统 (CMS)： 在正在编辑的内容旁边提供预览窗格或编辑工具。一个并行路由可以实时显示正在撰写的文章的预览，并随着更改实时更新。
• 学习平台： 在显示课程资料的同时，旁边展示学习进度跟踪或社交互动功能。
• 金融应用： 在新闻或分析文章旁边显示实时股票报价或投资组合摘要。想象一个金融新闻网站使用并行路由，在突发新闻报道旁显示实时市场数据，为用户提供全面的金融市场视图。
• 全球协作工具： 允许同时编辑文档或代码，并配有持久的视频会议或聊天面板。一个分布在旧金山、伦敦和东京的工程团队可以使用并行路由实时处理同一份设计文档，同时在侧边栏持久显示视频通话，从而促进跨时区的无缝协作。

结论

Next.js 并行路由是一项强大的功能，它为构建动态、灵活的 Web 应用程序开辟了一个充满可能性的新世界。通过允许您在同一页面布局中渲染多个独立的部分，并行路由使您能够创建更具吸引力的用户体验、提高代码可重用性并简化开发过程。虽然考虑潜在的复杂性并遵循最佳实践很重要，但掌握并行路由可以显著提升您的 Next.js 开发技能，并让您构建真正创新的 Web 应用程序。

随着 Next.js 的不断发展，并行路由无疑将成为希望突破 Web 可能性边界的开发人员越来越重要的工具。尝试本指南中概述的概念，探索并行路由如何改变您构建现代 Web 应用程序的方法。