目标是学习如何创建合理的文件夹结构及了解路由系统

文档：Building Your Application: Routing | Next.js (nextjs.org)

总览

Next.js使用基于文件系统的路由器，其中文件夹用于定义路由。

特殊的文件夹名称

$xxx$ 动态路由
@xxx 平行路由
(xxx) 路由组
(..)xxx 拦截路由

动态路由 $floderName$

可以通过将文件夹的名称括在方括号中来创建动态区段： [folderName] 。例如， [id] 或 [slug] . 例如，博客可以包含以下路线 app/blog/[slug]/page.js ，其中 [slug] 是博客文章的动态段。

TypeScript 复制代码

export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>
}

Parallel Routes 平行路由/并行路由: @floderName

"并行路由"允许您在同一布局中同时或有条件地呈现一个或多个页面。

Slots 插槽

使用命名时隙创建并行路由。插槽是按照 @folder 约定定义的。
然后组件 app/layout.js 现在接受 @analytics 和 @team slot 道具，并且可以与 children prop 并行渲染它们：

TypeScript 复制代码

export default function Layout({
  children,
  team,
  analytics,
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <>
      {children}
      {team}
      {analytics}
    </>
  )
}

Route Groups 路由组 (floderName)

在目录中 app ，嵌套文件夹通常映射到 URL 路径。但是，您可以将文件夹标记为路由组，以防止该文件夹包含在路由的 URL 路径中。 Good to know:

路由组的命名除了组织之外没有特殊意义。它们不会影响 URL 路径。
包含路由组的路由不应解析为与其他路由相同的 URL 路径。例如，由于路由组不会影响 URL 结构， (marketing)/about/page.js 并且 (shop)/about/page.js 会解析并 /about 导致错误。
如果使用多个根布局而没有顶级 layout.js 文件，则应在其中一个路由组中定义主 page.js 文件，例如： app/(marketing)/page.js .
跨多个根布局导航将导致整个页面加载（与客户端导航相反）。例如，从 /cart 该用途导航到 /blog 该用途 app/(shop)/layout.js app/(marketing)/layout.js 将导致整个页面加载。这仅适用于多个根布局。

Intercepting Routes 拦截路由 (.)floderName (..)floderName

拦截路由允许你在当前页面加载其他模块的内容

请注意，该 (..) 约定基于路由段，而不是文件系统。

例如，单击源中的照片时，可以在弹框中显示照片。在这种情况下，Next.js 会拦截 /photo/123 路由，屏蔽 URL，并将其覆盖在 /feed 上。

刷新后但是，或跳转，应呈现整个照片页面而不是弹框。不应发生路由拦截。

可以使用

(.) 匹配同一级别的区段
(..) 匹配上一级的区段
(..)(..) 匹配上述两个级别的区段
(...) 匹配根 app 目录中的区段

约定的文件（熟悉文件的作用）

Next.js提供了一组特殊文件，用于在嵌套路由中创建具有特定行为的 UI：


`layout`	Shared UI for a segment and its children
`page`	Unique UI of a route and make routes publicly accessible
`loading`	Loading UI for a segment and its children
`not-found`	Not found UI for a segment and its children
`error`	Error UI for a segment and its children
`global-error`	Global Error UI
`route`	Server-side API endpoint 服务器端 API
`template`	Specialized re-rendered Layout UI 专门的重新渲染布局 UI
`default`	Fallback UI for Parallel Routes 并行路由的回退 UI

Component Hierarchy 组件层次结构

layout.js
template.js
error.js (React error boundary)
loading.js (React suspense boundary)
not-found.js (React error boundary)
page.js or nested layout.js

最后看看 Loading UI and Streaming

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

What is Streaming? 什么是流媒体？

要了解流式处理在 React 和 Next.js 中的工作原理，了解服务器端渲染（SSR）及其局限性会很有帮助。

使用 SSR，在用户查看页面并与之交互之前，需要完成一系列步骤：

首先，在服务器上获取给定页面的所有数据。
然后，服务器呈现页面的 HTML。
页面的 HTML、CSS 和 JavaScript 将发送到客户端。
使用生成的 HTML 和 CSS 显示非交互式用户界面。
Finally, React hydrates

这些步骤是连续的和阻塞的，这意味着服务器只能在获取所有数据后呈现页面的 HTML。而且，在客户端上，React 只有在下载了页面中所有组件的代码后才能对 UI 进行hydrate。

带有 React 和 Next.js 的 SSR 通过尽快向用户显示非交互式页面来帮助提高感知的加载性能。

但是，它仍然可能很慢，因为需要先完成服务器上的所有数据获取，然后才能向用户显示页面。

Streaming 流式处理允许您将页面的 HTML 分解为更小的块，并逐步将这些块从服务器发送到客户端。

这样可以更快地显示页面的某些部分，而无需等待所有数据加载后才能呈现任何 UI。

流式处理与 React 的组件模型配合得很好，因为每个组件都可以被视为一个块。具有更高优先级的组件（例如产品信息）或不依赖数据的组件可以先发送（例如布局），React 可以更早地开始水合作用。优先级较低的组件（例如评论、相关产品）在获取数据后可以在同一服务器请求中发送。

当您想要防止长数据请求阻止页面呈现时，流式处理特别有用，因为它可以减少第一个字节的时间（TTFB）和第一个内容绘制（FCP）。它还有助于改善交互时间（TTI），尤其是在速度较慢的设备上。

Example 例

<Suspense> 其工作原理是包装执行异步操作的组件（例如获取数据），在执行异步操作时显示回退 UI（例如骨架、微调器），然后在操作完成后交换组件。

app/dashboard/page.tsx 应用/仪表板/页面.tsx

Typescript 复制代码

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Loading weather...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

通过使用 Suspense，您可以获得以下好处：

流式处理服务器渲染 - 从服务器到客户端的渐进式渲染 HTML。
React 根据用户交互优先确定哪些组件的优先级。

更多Suspense示例和用例，请参见React文档。

初探nextjs的路由

总览