herohoroブログ

ブログの記事を効率良く探せるpath(slug列以外)を深ぼる | Routing・Dynamic routes_Blog learn07



🔄   2022-08-14

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

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

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

画像が読み込まれない場合はページを更新してみてください。

https://herohoro.com/blog/category_support

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

画像が読み込まれない場合はページを更新してみてください。

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

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

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

easy-notion-blogの仕組みを…

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

\ テーマは「path」です⭐ /


🛠
私のブログで解説をすると差分によって混乱させてしまう気がするので、 本家のデザインに戻した状態のスクショを参照しながら解説していきます。 開発画面上での説明になるので、ドメインは localhost:3000 で進めます。 ※ 本来であれば私の場合はhttps://herohoro.com になります。
画像が読み込まれない場合はページを更新してみてください。

pathって何?実際に観察してみよう

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

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

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

記事一覧ページ

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

画像が読み込まれない場合はページを更新してみてください。
blog

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

とあります。

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

画像が読み込まれない場合はページを更新してみてください。
home

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

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

画像が読み込まれない場合はページを更新してみてください。
記事一覧2ページ目以降

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

画像が読み込まれない場合はページを更新してみてください。

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

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

3ページ目へ進むと….

画像が読み込まれない場合はページを更新してみてください。

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

4ページ目も…..

5ページ目も…..

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

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

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

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

画像が読み込まれない場合はページを更新してみてください。


🤓
「Tags列で構成された」とあえて前置きするのは NotionDBを見るとTagsという列名があることから明記しています。
画像が読み込まれない場合はページを更新してみてください。

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

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

画像が読み込まれない場合はページを更新してみてください。

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

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

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

画像が読み込まれない場合はページを更新してみてください。

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

🏋️‍♀️
調べたところBlog%20learn の【%20】は空白を意味したpathなようです。

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

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

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

Tags列で作られたCategoryの記事一覧2ページ目以降

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

画像が読み込まれない場合はページを更新してみてください。

tag/Category名だったpathが

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

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

3ページ目も…..

4ページ目も…..

同じです。

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

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

Next.jsの公式ドキュメントから意味を調べる

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

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

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

画像が読み込まれない場合はページを更新してみてください。
Getting Started/manual-setup _Next.js公式ドキュメントより

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

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

🧐
pages/about.js/aboutっていうパスにしてるのか…..

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

ディレクトリとの関係性

VSCodeを開いてみると….

画像が読み込まれない場合はページを更新してみてください。

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

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

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

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

もやっとするのが2点:

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

index.tsxって何?

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 👉  /

🧐
公式ドキュメントは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 のファイルに一致させている….

[ ]のついたファイルは

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

💁‍♀️
「どうやって名前を変化させてパスにしているのか…」 といった部分はBlog learn04を参照してみてください。

  • 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
  • 記事一覧2ページ目以降:blog/before/日付
  • Tags列のCategory記事一覧ページ:blog/tag/Category名
  • Tags列のCategory記事一覧2ページ目以降:blog/tag/Category名/before/日付

同じだ〜〜〜〜〜\(^o^)/\(^o^)/

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

画像が読み込まれない場合はページを更新してみてください。

まとめ

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

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

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

辛かった理由は…..

画像が読み込まれない場合はページを更新してみてください。

https://herohoro.com/blog/category_support

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

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

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

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

画像が読み込まれない場合はページを更新してみてください。

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

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

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

画像が読み込まれない場合はページを更新してみてください。

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

スッキリぽんです 🧹 💨

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

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

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

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

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

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/

Twitter Timeline


フォロー大歓迎\(^o^)/