やったこと

• 書籍「実践NextJS」1章 読了

学んだこと

Route 系の用語整理

Tree/Subtree

• Tree ... 階層構造
• Subtree ... 入れ子のTree
• Root ... TreeまたはSubtreeにおける根っこのノード
• Leaf ... 子を持たないノード

Segment / Path

example.com/profile/settings

• example.com ... ドメイン名
• profile , settings ... Segment
• profile/settings ... Path

特定のPathに対応する Segment を、 「Root Segment」 と呼ぶ。
末端（≒子Segment を持たない）Segment を Leaf Segment と呼ぶ。

Dynamic Route / Dynamic Segment

Pathが動的に変わり得るRouteを Dynamic Route と呼ぶ。

• ID情報を含む場合など

Dynamic Route を構成するSegment を Dynamic Segment と呼ぶ。

Route Segment の構成

app ディレクトリを頂点に、ファイル配置でRouteを表現する。

src/app/
├── company-info 
│   └── page.tsx // localhost:3000/company-info
...
└── page.tsx // localhost:3000/ (ルート)

layout.tsx

Header , Footer , サイドナビなど、全画面共通で表示したいUIを実装する場所。

また、layoutファイルはネスト出来る。
つまり、layoutファイルは、Segment毎に設けることが出来る。

Segment は Pageファイル必須ではなく、layoutファイルだけでも良い。

ナビゲーションの概念と用語

• ハードナビゲーション ... 画面を再読み込みする画面遷移
• ソフトナビゲーション ... 画面を再読み込みしない画面遷移

※ナビゲーション ... 画面遷移のこと

NextJS の SPAは「ソフトナビゲーション」。
加えて、データやレンダリングした画面をキャッシュしてくれる。

Dynamic Segment

[categoryName] 部分が Dynamic Segment。

ディレクトリ構成

├── categories
│ └── [categoryName]
│ └── page.tsx


index.tsx

...
<li>
  <Link href="/categories/flower">花</Link>
</li>
<li>
  <Link href="/categories/animal">動物</Link>
</li>
...

所感

• NextJS で言う Route は、ファイルシステムに近そう
• "Root Segment" の解説から、どのSegment も、必ずRootを持つ...ということになりそう
• layout ファイルを使いこなすことで、コードを共通化 が捗りそう
• dynamic segment は、機能としては理解できたが、有効なユースケースが思い浮かばない
  • 経験を積めばわかるかな？