selectプロパティでCategory列を追加し、

multi_selectプロパティのTags列と合わせて

記事の系統分けをした改造ネタをお話しました。

https://herohoro.com/blog/category_support

後半雑な締めくくりになってしまったことを反省し…..

https://herohoro.com/blog/category_support#Tags機能のように専用ページを用意したい！？

専用ページを用意するために

必要なNext.jsの知識を公式ドキュメントを参照しながら、

easy-notion-blogの仕組みを…

今度はちゃんと解説していこうと思います(´；ω；｀)

＼ テーマは「path」です⭐ ／

普段あまり気にしませんが…..

easy-notion-blogには何種類か存在しています。

実際にページを開きながらpathを観察してみたいと思います(*´ω`*)(*´ω`*)

まずよく開くのが【記事一覧ページ】

pathに注目すると….. localhost:3000/blog

とあります。

Homeへ戻って確認すると….localhost:3000

記事一覧ページに移動することでpathが/blog と追加されたことが分かります。

続きのページはというと…..

記事一覧の次のページへ進むとpathが変わっています。

記事一覧ページでは localhost:3000/blogだったのに

次のページへ行くとbefore/2022-06-22 が追加されました。

３ページ目へ進むと….

before/ までは同じで最後の日付だけ変わっています(´・ω・`)

４ページ目も…..

５ページ目も…..

日付だけが変化しています。

記事一覧ページの２ページ目以降は….

before/日付 という法則がありそうですね….(´・ω・`)

今度はTags列で構成されたCategoryを見てみましょう….

Blog learnというCategoryを開くと….

普通の記事一覧ページではlocalhost:3000/blogでしたが、

Tags列で作られたCategoryの方はtag/Blog%20learn が追加されています。

他のCategoryを見てみると…..

「NotionAPI」というCategory名の記事一覧ページもtag/NotionAPI が追加されています。

Tags列で作られたCategoryの記事一覧ページのpathは….

普通の記事一覧ページと比べると、

tag/Category名 が追加されるという法則がありそうですね….(´・ω・`)

次のページへ移動してみると…..

tag/Category名だったpathが

tag/Category名/before/日付 に変化しています。

before/日付 が追加されました。

３ページ目も…..

４ページ目も…..

同じです。

Tags列で作られたCategoryの記事一覧２ページ目以降のpathは…..

１ページ目と比べるとbefore/日付が追加される法則がありそうですね…..(´・ω・`)

pathを観察して分かったのは….

• 記事一覧ページ：blog
• 記事一覧２ページ目以降：blog/before/日付
• Tags列のCategory記事一覧ページ：blog/tag/Category名
• Tags列のCategory記事一覧２ページ目以降：blog/tag/Category名/before/日付

これはどういう意味で作られているのか….

https://nextjs.org/docs/getting-started#manual-setup

pagesディレクトリ：ファイル名を基準に関連させる

VSCodeを開いてディレクトリの構成を確認するとpathとのつながりが出てきそうです….(´・ω・`) 👍

VSCodeを開いてみると….

pagesディレクトリの中にありますあります⭐

apiディレクトリ・blogディレクトリ内の【 _ 】から始まるのは今回直接は関係しないので省略すると….

• pages
  • blog
    • before
      • [date].tsx
    • tag
      • [tag]
        • before
          • [date].tsx
      • [tag].tsx
    • [slug].tsx
    • index.tsx
  • index.tsx

こんな構成になってます(´・ω・`)

もやっとするのが２点：

1. index.tsxってなんだろう…
2. [ ] で表されているファイルってなんだろう….

Next.jsの公式ドキュメントを見てみると…..

https://nextjs.org/docs/routing/introduction#index-routes

indexというファイル名にすると自動的に【 / 】と解釈してpathにしてくれる＼(^o^)／

• pages
  • blog
    • before
      • [date].tsx
    • tag
      • [tag]
        • before
          • [date].tsx
      • [tag].tsx
    • [slug].tsx
    • index.tsx 👉 /
  • index.tsx 👉  /

https://nextjs.org/docs/basic-features/pages

Next.jsはReactコンポネントで.tsx も対象だよって書かれてた＼(^o^)／

Next.jsの公式ドキュメントを見てみると…..

https://nextjs.org/docs/routing/dynamic-routes

/post/1・/post/abcとかっていうパスは

pages/post/[pid].js のファイルに一致させている….

[ ]のついたファイルは

何か名前を自由に変更させてパスにすることができる(´・ω・`)

• pages
  • blog
    • before
      • [date].tsx 👉 ページを進めるごとに日付が変わってた….
    • tag
      • [tag]
        • before
          • [date].tsx 👉 ページを進めるごとに日付が変わってた….
      • [tag].tsx 👉 Category名を選ぶごとにCategory名が変わってた….
    • [slug].tsx 👉 記事ごとにslugが変わってる….
    • index.tsx 👉 /
  • index.tsx 👉  /

pagesは省略したディレクトリをパスっぽく表してみると….

• blog/before/[date] 👉 blog/before/日付
• blog/tag/[tag]/before/[date] 👉 blog/tag/Category名/before/日付
• blog/tag/[tag] 👉 blog/tag/Category名
• blog/[slug] ※ 今回省略
• blog/
• /

ってなる(´・ω・`)

さっきブログを表示させながら整理したpathは…..

• 記事一覧ページ：blog
• 記事一覧２ページ目以降：blog/before/日付
• Tags列のCategory記事一覧ページ：blog/tag/Category名
• Tags列のCategory記事一覧２ページ目以降：blog/tag/Category名/before/日付

同じだ〜〜〜〜〜＼(^o^)／＼(^o^)／

ちなみに / はHome画面だね🎶

VSCodeでよく見るpagesディレクトリ内のファイルはブログのpathと深い関係がある✍

multi_selectプロパティのTags列のCategory機能に加え、

selectプロパティのCategory列のCategory機能を実装した時に

辛かった理由は…..

https://herohoro.com/blog/category_support

既存の４つのファイルにも追加しないといけなかったから。

• 記事一覧ページ：blog
• 記事一覧２ページ目以降：blog/before/日付
• Tags列のCategory記事一覧ページ：blog/tag/Category名
• Tags列のCategory記事一覧２ページ目以降：blog/tag/Category名/before/日付

NotionDBの列にあるデータをブログに表示させたい場合….

毎回この追加をする必要があります。

例えば、OGImageに登録した画像をブログの記事一覧などに表示させたい時も同様。

いいねボタンの値を記事一覧に表示させたい時も同じく…..( ﾟдﾟ)ﾊｯ!

そんな時でも整然たるコードを保ってくれるのがcomponent。

componentのおかげで行数の少なさがヤバいレベルに。

スッキリぽんです 🧹 💨

記事一覧で10件ずつ表示できるようにしている[date].tsxの内容は….

アルパカ先生の記事があります＼(^o^)／

ちょいと10件表示と関連して次へのボタンと戻るボタンの実装について

解説した私の記事もあったりするので

興味のある方は参考になさってください⭐