今天中秋節前夕耶，就來聊聊簡單又好用的 Routes Group~
不知道明天還有沒有更輕鬆的主題(X
在 app 文件中建立的資料夾都會成為某一個 route 的路徑。
Next 提供了一個特殊的命名方式，以這種方式命名的文件夾不會影響到 route，這讓我們可以在同一個路徑下建立 routes 的群組，讓 folder 的目的更清晰。
此外，與 layout.tsx 結合使用還能為該 routes group 建立共用 UI。
layout.tsx 結合使用非常簡單，只要用 () 把文件夾的名稱括起來，就可以在 app 底下建立一個不會影響 route 的 folder。
像是：app/(groupname)/about/page.tsx 實際的路徑為 /about
中間的 groupname 可以隨意填寫，不會影響 route。
layout.tsx 結合使用route group 非常逆天的功能就是，這個不影響 route 的群組居然可以創建共用 UI：layout.tsx。
layout 嵌套 route group 的 layout這有點饒口，在建立 route group 以前，原本的 folder 還是保有自己的 layout，再加上 route group 底下自己的 layout，這樣會嵌套兩層 layout。
這給了我們非常彈性的應用空間，因為它讓我們的在不影響 route 的情況下，可以為每一個 route group 建立自己的共用 UI。
官網也有提到一個案例，如果網站提供兩種以上截然不同的呈現方式，可以在根目錄直接使用 route group 切分 route，每個 route 負責一種呈現方式。
可以去掉根目錄的 layout，只使用 route group 的 layout。如果是在根目錄這樣使用的話，每個 route group 也需要特別要加上 <html> 與 <body> tag。
在建立 route group 要注意 route 撞名的問題，因為 () 包住的路徑是不會解析的，所以有可能不同的 route group 都建立了同樣的 route，這樣 Next 是會報錯滴。
以下就是 /about 撞名的範例
app/(firstGroup)/about/page.tsx
app/(secondGroup)/about/page.tsx
因為這兩個 route group 都在渲染了 /about，所以 Next 會噴錯。
Next: 你搞得我好亂ㄚ
iThome鐵人賽
看影片追技術