nextjs slot是什么

在 Next.js 的路由系统中，"Slot" (插槽) 这是一个非常特定的术语，通常指代 Parallel Routes (并行路由)。

它和大家熟知的 Vue 插槽 (<slot>) 概念类似，但在 Next.js 中是用来做页面布局组合的。

1. 怎么辨认 Slot？

在文件系统中，文件夹名字以 @ 开头的就是 Slot。

• @team
• @analytics
• @modal

2. Slot 是用来做什么的？

并行路由 (Parallel Routes) 允许你在同一个布局（Layout）中，同时渲染多个页面，并且这几个部分可以独立导航、独立加载（Streaming）、独立报错。

常见场景：复杂的 Dashboard 布局

假设你有一个后台首页 /dashboard，你需要同时展示两个独立的模块：

1. Team 面板 (左边)
2. Analytics 图表 (右边)

文件结构：

app/
  dashboard/
    layout.tsx      <-- 只要布局，不要 page.tsx (或者两者都要)
    @team/
      page.tsx      <-- 对应 /dashboard 的 Team 部分
    @analytics/
      page.tsx      <-- 对应 /dashboard 的 Analytics 部分

代码 (layout.tsx): Next.js 会自动把 @team 和 @analytics 文件夹里的内容，作为 props 传给父级的 layout.tsx。

// app/dashboard/layout.tsx
export default function Layout({
  children,
  team, // <--- 对应 @team/page.tsx
  analytics, // <--- 对应 @analytics/page.tsx
}: {
  children: React.ReactNode;
  team: React.ReactNode;
  analytics: React.ReactNode;
}) {
  return (
    <>
      <nav>导航栏</nav>
      <div className="flex">
        <div className="w-1/2">{team}</div>{" "}
        {/* 这里不仅是组件，是由路由决定的内容 */}
        <div className="w-1/2">{analytics}</div>
      </div>
    </>
  );
}

3. 最常用的场景：拦截路由 (Intercepting Routes) 与 模态框 (Modal)

这是目前用 Slot 最多的地方。比如 Instagram 或 Twitter：

• 用户在 Feed 流点某张照片 -> URL 变成 /photo/123 -> 页面背景不动，弹出一个模态框显示照片。
• 用户直接刷新 /photo/123 -> 打开一个独立的全屏页面。

怎么做？ 你需要用到 @modal 这个 slot 来承载模态框内容，配合 (..) 拦截路由语法。

总结

• 如果你只是做普通的 Web 页面跳转（详情页、列表页），不需要用到 Slot。
• 只有当你需要在一个 URL 下同时展示多个并行的页面区域（Dashboard），或者实现复杂的模态框路由时，才需要用到 @folderName 这种 Slot 写法。
• 不要混淆： 动态路由参数是用 [id] (方括号)，并行路由插槽是用 @slot (艾特符号)。