herohoroブログ

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



🔄   2023-03-14
No comments to display

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

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

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

image block

https://herohoro.com/blog/category_support

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

image block

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

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

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

easy-notion-blogの仕組みを…

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

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


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

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

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

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

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

記事一覧ページ

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

image block
blog

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

とあります。

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

image block
home

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

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

image block
記事一覧2ページ目以降

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

image block

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

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

3ページ目へ進むと….

image block

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

4ページ目も…..

5ページ目も…..

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

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

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

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

image block


🤓
「Tags列で構成された」とあえて前置きするのは
NotionDBを見るとTagsという列名があることから明記しています。
image block

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

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

image block

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

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

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

image block

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

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

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

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

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

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

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

image block

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/日付

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

image block
Getting Started/manual-setup _Next.js公式ドキュメントより

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

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

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

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

ディレクトリとの関係性

VSCodeを開いてみると….

image block

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の公式ドキュメントを見てみると…..

image block

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じゃないけど…..

image block

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

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

[ ] で表されているファイルって何?

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

image block

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画面だね🎶

image block

まとめ

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

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

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

辛かった理由は…..

image block

https://herohoro.com/blog/category_support

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

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

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

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

image block

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

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

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

image block

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

スッキリぽんです 🧹 💨

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

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

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

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

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

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

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

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

Buy Me A Coffee

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


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

https://herohoro.com/atom

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

Twitter Timeline


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