Next.js - 具名槽位 & 平行路由 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

Next.js - 具名槽位 & 平行路由

parallel routes named slots next.js @folder

hy_c 2026-09-20 12:40:49 ‧ 88 瀏覽

分享至

這篇是進階路由的專有名詞講解。
在Next.js框架中有一種進階路由寫作：@Folder 意思是 Parallel Routes（平行路由）的 Named Slots (具名槽位)，這篇將來講講什麼平行路由 (Parallel Routes)，又什麼是具名槽位 (Named Slots)

1. Parallel Routes（平行路由）是什麼？

讓你在同一個畫面上、同一個父層 Layout 裡面，同時渲染多個不同的頁面或元件。
一般來說，一個頁面（page.tsx）對應一個網址，畫面上只有一個主要的內容區塊，但如果你的網頁畫面上同時需要「數據分析圖表」、「即時聊天室」和「使用者清單」，而且它們需要各自獨立運作（例如：使用者在圖表區切換分頁時，聊天室不會跟著重新整理或重置狀態），這時候就要用平行路由。

2. 具名槽位 (Named Slots) 與 `@資料夾` 是什麼？

Next.js 要怎麼知道哪些區塊要放進同一個畫面的不同「格子」裡呢？答案就是使用 @ 命名資料夾，這就叫做具名槽位 (Named Slots)。

特性一：不影響網址
如果你建了一個 @analytics 資料夾，這個 @ 符號只是 Next.js 內部的識別標記，它不會出現在網址列中（使用者不會看到 /analytics 變成網址，網址依然由外層決定）。
特性二：自動變成 Layout 的 Props
這些帶有 @ 的槽位資料夾，會自動作為同層級 layout.tsx 的同名參數（Props）傳進去。

3. 舉個例子

假設你的檔案結構長這樣：

app/
  ├── layout.tsx       # 父層 Layout
  ├── page.tsx         # 首頁本身的主要內容
  ├── @analytics/      # 具名槽位 1
  │   └── page.tsx
  └── @team/           # 具名槽位 2
      └── page.tsx

這時候，在你的 app/layout.tsx 裡面，你可以同時接收這兩個槽位並自由排版：

// app/layout.tsx
export default function Layout({ 
  children,   // 代表 app/page.tsx 的內容
  analytics,  // 代表 @analytics/page.tsx 的內容
  team        // 代表 @team/page.tsx 的內容
}) {
  return (
    <html lang="zh-TW">
      <body>
        <main>{children}</main>
        
        {/* 同時把兩個平行路由的內容渲染在畫面上 */}
        <div className="grid-container">
          <section>{analytics}</section>
          <section>{team}</section>
        </div>
      </body>
    </html>
  );
}

總結

Parallel Routes（平行路由）：一種「同畫面上跑多個獨立頁面」的架構模式。
Named Slots (具名槽位) / @Folder**：實現平行路由的語法工具**。你用 @folderName 建立資料夾，Next.js 就把它當作一個具名槽位，讓你可以在 Layout 裡隨心所欲地擺放它。