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

今まで

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

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

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

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

「このボタンを押した後、２ページ目以降に「Back page」ボタンはない。」( ﾟдﾟ)ﾊｯ!

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

って、、、、

結構消耗しました(；´Д｀)

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

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

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

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

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

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

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

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

記事一覧トップページ

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

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

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

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

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

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

dynamic routesって・・・

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

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

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

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

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

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

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

pages/blogs/intex.tsxより

👇

結果：

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

「Back page」がでない!!!

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

結果を確認。

出て来た。

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

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

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

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

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

[date].tsxより

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

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

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

lib/notion/client.tsより

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

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

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

lib/blog-helpers.tsより

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

posts[posts.length - 1].Date が

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

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

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

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

getStaticPathsと同じpathになってる＼(^o^)／

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

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

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

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

このpostsはgetPostsではない。

getStaticProps内にあるpostsのこと。

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

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

getStaticProps内にある

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

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

client.tsより

• 10件表示される
• リンク末尾の日付より過去の記事を表示する

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

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

firstPostになる前はgetFirstPost 。

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

client.tsより

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

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

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

今日はここまで＼(^o^)／

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

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

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

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

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

フォールバックとか、

キャッシュ参照とか、

バリデーションとか、

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

奥が深いぜ

続きはこちら＼(^o^)／