herohoroブログ

戻るボタンを設置するためにNext pageボタンを徹底的に解読する



🔄   2022-08-02

「Next page」の装飾をいじってたとき・・・

image block

image block

今まで

あんまりNext pageボタンを押して

過去の記事一覧を眺めることもなかった。。。。。

ボタン装飾を確認するため

ポチポチ押してた時に感じた違和感・・・・。

「このボタンを押した後、2ページ目以降に「Back page」ボタンはない。」( ゚д゚)ハッ!

作ってみよーう(๑>◡<๑)

って、、、、

結構消耗しました(;´Д`)

※ ブログのスクショが装飾変更後のものも混じっていますが気になさらずにm(_ _)m

実装した時はなんとなくサンプルコードを拝借して動いたので

気軽にツイートしたものの、

「なぜ?」を追い求めれば追い求めるほど深い知識が必要でした。

今日は「なぜ?」を解読するために

公式ドキュメントなどを参照しながら

コードにメモして納得させていく内容です。

実装編は次の記事をご覧ください\(^o^)/

Step1:どのデータを改造すればいいのか

リンク末尾に注目してみる

記事一覧トップページ

image block

「Next page」を押すとリンクが日付になる

image block

🧐
戻るボタンは2ページ目以降だから日付になるページから改造すればいいのか・・・。

なんでリンクが変わるの?

image block

詳細:https://nextjs.org/docs/routing/introduction

☝🏻
記事一覧トップページのリンクはIndex routesのことだね

2ページ目以降の日付リンクは汎用性のあるroutesが該当しそう・・・

image block
🤔
Dynamic routes を使って2ページ目以降のページリンクを作っているとしたら・・・

image block

詳細:https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation

😀
dynamic routesgetStaticPathsを使ってパスを作っていく!!

returnにあるpathsについてもう少し見ていくと・・・・

image block

詳細:https://nextjs.org/docs/basic-features/data-fetching#the-paths-key-required

🤔
getStaticPaths を取り出すとpaths の内容を返してくれるのか・・・・。

dynamic routesって・・・

image block

詳細:https://nextjs.org/learn/basics/dynamic-routes/page-path-external-data

🤔
[ ]の形式のファイルのことか!!

フォルダーから似たような部分を探してみる。

image block

記事一覧は日付のパスになっていたよな・・・

image block

🤔
[date].tsxが、2ページ目以降の一覧ページを作っているようだ。。。。

コードを見てみる

pages/blog/before/[date].tsxより

image block

【Next Page】ボタンの記述を発見!!!

pages/blog/index.tsxの内容とそっくり

image block

🤨
本当に[date].tsxが2ページ目以降の一覧ページを作ってるの???

Back pageっぽいダミーを仮で作って確認

Next pageのコードをコピペして表示だけ「Back page」としておく。

pages/blogs/intex.tsxより

image block

👇

image block

結果:

image block

Next pageをクリックして次のページも「Back page」が表示されているかを確認

image block

「Back page」がでない!!!

🤔
ってことはやっぱindex.tsxは1ページ目のみを設定するためにあるのか・・・・

今度は[date].tsxの部分にダミーback pageボタンを設置してみる。

image block

結果を確認。

image block

出て来た。

😀
1ページ目にはBack pageボタンはいらないからpages/blogs/intex.tsxはいじらなくていいね。

分かったこと:

  • リンク末尾に日付が表示されるのは2ページ目以降の記事一覧。
  • Back pageボタンを設定するなら[date]tsxを改造すればいい。

step2:[date].tsxが表示するパスの仕組みを調査

image block

詳細:https://nextjs.org/docs/basic-features/data-fetching#the-paths-key-required

表示させるのにgetStaticPaths を使っている。

getStaticPathsって?__本日2回目(´・ω・`)

image block

詳細:https://nextjs.org/docs/basic-features/data-fetching#technical-details-1

  • [date].tsxのようなdynamic routeパラメーターのあるページはgetStaticProps だけではなくgetStaticPaths も使う必要がある。
  • 作成時にだけサーバー上で動く
  • 存在する1ページに対してしか使えない
  • プロパティとしては使えない

コードを見てみる

[date].tsxより

image block

returnの値の[path] が一覧ページのパス。

[path]について詳しく見るために、getPosts を辿ってみる。。。。

image block

上の方に行くとlib/notion/clientからimportされていることが分かる。

lib/notion/client.tsより

image block

☝🏻
postsは記事を日付で降順に並べた時1ページに10件取り出したデータ

[date].tsxをもう一度見て追記メモ。

image block

次にgetBeforeLink を詳しく見ていく。。。

image block

今度は/lib/blog-helpers からimportしているみたい。

lib/blog-helpers.tsより

image block

☝🏻
日付を入れるとgetBeforeLinkは/blog/before/日付 と表示してくれる・・・

[date].tsxをもう一度見て追記メモ。

image block

posts[posts.length - 1].Date

本当にページ毎の最後の記事の日付になっているか確認。

image block

Next Pageボタン(画面上はNextに修正されてますが・・・)をクリックすると・・・

image block

前のページの最後の記事の日付になってる\(^o^)/

[date].tsxのNext Pageボタンのリンク部分を見てみると・・・・

image block

getStaticPathsと同じpathになってる\(^o^)/

[date].tsxのリンクから分かったこと

  • getStaticPathsが動いている
  • パスは記事の日付
  • 1ページ毎に10件表示される
  • 次のページパスは前のページの最後の記事の日付

step3:もう一つのpostsを調査

[date].tsxのgetStaticPaths内にあったposts

image block

これはgetPostsを意味している。

[date].tsxのNext Pageボタン部分のposts

image block

このpostsはgetPostsではない。

image block

getStaticProps内にあるpostsのこと。

getStaticPropsって?
image block

詳細:https://nextjs.org/docs/basic-features/data-fetching#when-should-i-use-getstaticprops

なるべく軽く・早く動くように雛形をなるべく作りその中で読み込ませるデータ項目のこと。

getStaticProps内にある

postsはgetPostsBefore を意味しているらしい。。。。。

getPostsBeforeって?

import部分に遡るとlib/notion/client.ts にあるらしい。。

image block

client.tsより

image block

もう一つのpostsを調査して分かったこと
  • 10件表示される
  • リンク末尾の日付より過去の記事を表示する

image block

☝🏻
posts:リンクの日付より過去の記事を10件表示させるためのデータ

Step4:解読①

[date].tsxに戻って解読してみる。

image block

🤔
firstPostについて調べたほうが良さそう・・・・

Step5:firstPostを調査

[date].tsxを遡るとpostsの下にある。

image block

firstPostになる前はgetFirstPost

lib/notion/client.ts からimportされている。

image block

client.tsより

image block

Step6:解読②

追加でfirstPostについて分かったことを整理

image block
💡
日付が降順になってるから最初の記事は一番過去ページの最後の記事になる!!

まとめ

Next Pageボタンが表示される条件:

  • 最初の記事が存在する時で
  • 記事一覧にある記事が1件以上あって
  • 一番過去のページではない場合

今日はここまで\(^o^)/

Next pageボタンのリンクが奥深くて納得するまで解読するのに結構時間かかったけど、

やっと[date].tsx内で記述されていた条件分岐の意味を理解できた〜(*´ェ`*)

ついでにgetStaticpathsやgetStaticPropsも復習できて理解が深まったかも〜(´ε` )


もっと詳しく知りたい方は、

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

フォールバックとか、

キャッシュ参照とか、

バリデーションとか、

まだまだピンと来ていないので勉強していきたいな〜と思っております。。。( ゚д゚)ハッ!

奥が深いぜ


続きはこちら\(^o^)/

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

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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