18,722 讀數

Next.Js 13 条并行路由：综合指南

经过 Leandro Nuñez8m2023/08/17

太長; 讀書

本文经过精心编写，旨在了解 Next.js 13.3 中引入的强大功能 - 并行路由。

一、简介

你好呀！

欢迎阅读有关 Next.js 中并行路线的综合指南。

随着数字环境的发展，网络开发的复杂性也在不断发展。现代 Web 应用程序不仅需要强大的功能，还需要多功能的路由机制，以增强用户体验并适应复杂的设计结构。

本文经过精心编写，旨在了解 Next.js 13.3 中引入的强大功能 - 并行路由。

目标有两个：首先，让人们清楚地了解并行路线的重要性及其实际应用；其次，提供在 Next.js 项目中有效实施并行路线的实践见解。

让我们开始这个旅程，探索并行路线的变革潜力以及它们如何重新定义 Web 应用程序设计的边界。

2. 并行路线出现之前的世界

在并行路由出现之前，Web 开发人员在如何在单个视图上动态构建和显示内容方面受到限制。传统的路由机制相当线性：一个 URL，一个视图。

例如，考虑一个典型的仪表板设计：

 // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; }

导航到/dashboard/user将呈现用户仪表板，而/dashboard/team将显示团队仪表板。两者是相互排斥的。要查看不同的片段，用户通常必须完全离开当前视图。

这带来了挑战，特别是当开发人员想要同时或有条件地显示网站的多个部分时。传统的路由方法缺乏灵活性，因此很难在不诉诸复杂的状态管理或解决方法的情况下创建复杂的交互式布局，例如并排仪表板或模式。

值得庆幸的是，随着 Next.js 等框架的发展以及并行路由的引入，这种情况已经发生了巨大的改变，迎来了动态和自适应网页设计的新时代。

3. 了解并行路由

并行路由是 Next.js 13.3 中引入的突破性功能，显着改变了开发人员处理路由和 Web 内容呈现的方式。

3.1 并行路由简介：

Next.js 13.3 带来了全新的动态约定，可以实现更高级的路由案例。正如文档中所述，

“并行路由允许您在同一视图中显示多个页面，例如复杂的仪表板或模式。使用并行路由，您可以在同一视图中同时渲染一个或多个页面，并且可以独立导航。”

简而言之，应用程序的不同组件或部分可以同时加载，从而给人一种流动性和响应能力的感觉，特别是当某些组件由于获取数据或渲染而花费更长的时间时。

3.2 用例：仪表板、模态框等：

现代 Web 应用程序的结构通常需要结合多个视图的高级布局，或者需要上下文弹出窗口而不丢失底层内容。

以文档中的示例为例：

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

此布局演示了如何使用并行路由，使用名为“槽”的同一视图上同时显示用户和团队仪表板，“槽”是这种新路由方法的原生功能。

3.3 好处：多页面视图、条件渲染、独立导航：

并行路由的优点是多方面的。正如所强调的，它们允许：

“在同一视图中同时渲染一个或多个页面，可以独立导航”。

此外，它们还可用于页面的条件渲染，从而为 Web 应用程序提供前所未有的灵活性和活力。

从本质上讲，随着并行路由的出现，Web 开发人员现在能够更好地构建复杂、动态且用户友好的 Web 界面，为现代 Web 不断变化的需求量身定制。

4. 并行路由如何工作

深入了解并行路由可以看出 Next.js 13.3 的构建是多么巧妙。让我们逐步了解详细信息。

4.1 介绍“槽”和@folder约定：

“时隙”的概念是并行路由的核心。将插槽视为可以显示网站不同页面或部分的指定区域。

@folder约定是用于设置这些槽的方法，如文档注释所示：

“并行路由使用这些命名的‘槽’，使用 @folder 方法定义。”

代码说明：
- 并行路由的文件夹结构：考虑以下示例：
```
 dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js
```
  在这里，“@user”和“@team”充当不同内容的容器，使我们能够更灵活地设计我们的网站。
- 布局如何使用插槽作为道具：根据文档，同一路线段内的布局可以使用这些插槽作为道具。这是一个明显的例子：
```
 export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }
```
- 注意：在上面的代码中， getCurrentUserType()函数用于确定用户的类型，进而决定是否显示user或team槽位。
隐式与显式路由槽：Next.js 路由的优点之一是其灵活性。虽然我们示例中的“@user”和“@team”是我们定义的显式槽（直接链接到@folder ），但还有一个隐式或自动槽。
该文档解释说
“ children是这种自动槽，我们不需要将其与@folder关联。因此， dashboard/page.js功能与dashboard/@children/page.js相同。”

通过彻底掌握并行路由的运作方式，开发人员可以优化 Next.js 13 的功能，打造更直观、适应性更强的网站。

5. 如何使用并行路由的分步指南

5.1 设置新的 Next.js 应用程序

首先创建一个新的 Next.js 应用程序：

 npx create-next-app@latest parallel-routes

导航到新创建的应用程序的目录：

 cd parallel-routes

启动开发服务器：

 yarn dev

5.2 构建应用程序

在项目目录中，创建以下文件夹和文件：

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 创建比较并模拟数据加载

在app/@folder1/page.js中，我们将创建组件来显示和模拟加载时间，以了解组件加载的视觉顺序：

 export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> }

同样，在app/@folder2/page.js中：

 export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> }

这些模拟的加载时间使您可以直观地欣赏并行路线的功能。

5.4 更新布局代码

在app/layout.js中，调整布局代码以适应这两个文件夹：

前：

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

后：

 // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); }

请随意设计最佳的布局样式，以提高可读性

5.5 添加加载状态

Next.Js 文档指出：

特殊文件loading.js可帮助您使用React Suspense创建有意义的加载UI。通过此约定，您可以在加载路线段内容时显示服务器的即时加载状态。渲染完成后，新内容会自动换入。

对于每个组件（folder1 和folder2），我们将创建一个加载状态。你的文件夹结构应该是这样的：

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

应用程序/@folder1/loading.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

应用程序/@folder2/loading.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6.修改页面

调整app/page.js的内容。

此修改确保主页不显示任何内容，让并行路线大放异彩：

 import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null }