Next.js 現在有分成兩種路由方式，一個是新的 App Router，另外一個是 Page Router。

Page Router

檔案即路由

Page Router 的設計理念為「檔案即路由」，我們只要新增了檔案，就會對應成為路由，這種設計使得建立路由較為直觀，且易於管理。例如：

• pages/index.js → /
• pages/blog/index.js → /blog

如果是要多層級的路由，會根據你的檔名建立：

• pages/blog/first-post.js → /blog/first-post
• pages/user/settings/plan.js → /user/settings/plan

動態路由

此外也支援動態路由，以部落格為例，每篇文章都有自己專屬的網址，我們就可以建立一個 pages/post/[id].js 的檔案，在這裡，[id] 是一個路由參數，我們可以使用 router.query.id 對頁面進行更多的渲染與操作。

萬用路由

Page Router 還有一個可以取得所有片段的萬用路由 (Catch-all Segments)，例如 pages/shop/[...slug].js，會匹配所有 shop 片段後的路由，例如：

• /shop/cloths
• /shop/clothes/tops
• /shop/clothes/tops/t-shirts
• ...

App Router

Next.js 13 版推出了 App Router，我們改將檔案放在 app/ 資料夾底下 (以前是放在 pages/ )

以前面提到的 Page Router 為例子，首頁的配置是 pages/index.js → /，改成 App Router 的話，首頁配置變成 app/page.jsx → /

也就是說，App Router 改成用 page.jsx 對應每個路由：

• app/page.jsx → /
• app/blog/page.jsx → /blog

除了 page.jsx 外，還多了一個 layout.jsx 用來定義 Layout，你可以把他想成是網站的 header, footer ... 等不會變動的區塊，也就是俗稱的天地(不知道現在還有沒有人這樣稱呼 😂)。也就是在 Page Router 中，大家常用的 _document.jsx, _app.jsx。

layout.jsx 也是放在 app/ 底下，跟 page.jsx 同一層，例如：

app/
	page.jsx
    layout.jsx // root 的 layout.jsx 是必須存在的檔案
	blog/
    	page.jsx
        layout.js	// sub folder 的 layout.jsx 不一定要有

App Router 的特性

我想 Next.js 會從 Page Router 改成 App Router，很大的原因應該是因為 Next.js 走向伺服器導向，以及推出了 React Server Component，如官方原文所寫，App Router 是建構在 RSC (React Server Components) 上的

In version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more.

Next.js

雖然 App Router 使用上較複雜，但他提供了更好的性能以及進階的伺服器端功能，因為有的東西可以直接從 Server 端取得，不需再透過 Client 端處理。

我們在使用 React Component 時，也必須要標明是 client 還是 server，如果沒有標記，預設都會是 RSC (React Sever Component)，目前最大的不方便之處，就是 RSC 無法使用 hook，所以要用 hook 必須標記 'use client'

'use client'
'use server'

我目前的路由設計

我目前用 'use client' 居多，因為要用 hook XD，路由也是很簡單的設計如下：

app
  scheme/
    page.tsx
  stock/
    page.tsx
  layout.tsx
  page.tsx

▼ 目前的網站結構

結語

我覺得這篇寫得有點亂 😂，因為我也還在抓 App Router 的使用方式，也在磨合調整。

目前的進度，已經做好首頁的雛形，接下來，我想先研究什麼時候該用 'use server'，什麼時候用 'use client'，因為是邊做邊紀錄，文章也許會反覆來回調整，請各位見諒。

有任何的想法跟建議都歡迎告訴我，文章內有錯誤的地方，也歡迎指正，謝謝！

4

2

3

發生錯誤。