vercel/app-playgroundを触る

App Routerがどういうものなのか、説明だけを見ても全く理解できない

動かさないと全く理解できそうにないなmrsekut.icon

Vercelがサンプルを用意しているので使う

https://app-dir.vercel.app/

GitHub - vercel/app-playground: https://app-dir.vercel.app/

app/の中身

code:_

λ exa -TL=2 app

app

├── context

│ ├── categorySlug

│ ├── ContextClickCounter.tsx

│ ├── CounterContext.tsx

│ ├── layout.tsx

│ └── page.tsx

├── error-handling

│ ├── categorySlug

│ ├── error.tsx

│ ├── layout.tsx

│ ├── page.tsx

│ └── template.tsx

├── head

│ ├── categorySlug

│ ├── head.tsx

│ ├── HeadInfo.tsx

│ ├── layout.tsx

│ ├── page.tsx

│ └── template.tsx

├── head.tsx

├── hooks

│ ├── categorySlug

│ ├── layout.tsx

│ ├── page.tsx

│ └── template.tsx

├── isr

│ ├── id

│ ├── layout.tsx

│ ├── page.tsx

│ └── template.tsx

├── layout.tsx

├── layouts

│ ├── categorySlug

│ ├── layout.tsx

│ ├── page.tsx

│ └── template.tsx

├── loading

│ ├── categorySlug

│ ├── layout.tsx

│ ├── loading.tsx

│ ├── page.tsx

│ └── template.tsx

├── page.tsx

├── route-groups

│ ├── (checkout)

│ ├── (main)

│ ├── (marketing)

│ └── (shop)

├── ssg

│ ├── id

│ ├── layout.tsx

│ ├── page.tsx

│ └── template.tsx

├── ssr

│ ├── id

│ ├── layout.tsx

│ ├── page.tsx

│ └── template.tsx

├── streaming

│ ├── AddToCart.tsx

│ ├── CartCount.tsx

│ ├── CartCountContext.tsx

│ ├── delay.ts

│ ├── layout.tsx

│ ├── page.tsx

│ ├── Pricing.tsx

│ ├── product

│ ├── Product.tsx

│ ├── RecommendedProducts.tsx

│ └── Reviews.tsx

└── styling

├── css-modules

├── global-css

├── layout.tsx

├── page.tsx

├── styled-components

├── styled-jsx

├── tailwind

└── template.tsx

app/直下の階層には何が並べられている？

head/とかisr/とかhooks/とかが兄弟なの意味不明なんだがmrsekut.icon

いやこれは、このサンプルがdocs風だから、ってだけか

/isrとか/hooksというページが存在する

普通にpathに相当するものが列挙されているだけ

今までpages/直下に並べていたものをディレクトリにしてapp/に移動した感じ

例えば、/headというpathにアクセスするとこういう表示になる

これは、app/head/page.tsxにかかれている内容が表示されている

https://gyazo.com/150295d910e1007500075dbe7f9aca2e

「nested layout」という感じ、head/を見るとわかりやすい

https://i.gyazo.com/bfa8af3d80e469d559a4caa707a25af1.mp4

ページを進めるたびに、ネストの中に入っていく

URLも階層を踏んでいく

ページを切り替えた時に、ネスト部分のみが更新される

それ以外の箇所はそのまま

(ただし、再renderingはされてる)

タブの切り替えのような挙動をNext.jsだけでできるようになってる感じあるmrsekut.icon

app/route-groups/の下はなぜか()がついている

(checkout)/というディレクトリ名

これはどういうこと？

パンくずリストの箇所で、usePathnameを使っている

Package By Featureというか、Package By PageをNext.jsが規定した感じ

ただ、2つのpageにまたがるfeatureはどうすんじゃい！という問題がある

fetchしてるのは基本的にpage.tsxかlayout.tsxかって感じなのか

ui/にあるComponentはそれを受け取っているだけ

これだと結局、親が常に賢くて、バケツリレーしていく、という構造にならない？mrsekut.icon