改造11日目の続き。。。。

「Next Page」ボタンの逆をやれば戻るボタンを作れるのでは・・・？

と数日考えたものの、

どうもいい記述が思い浮かばない。。。。。。

思い浮かばない原因：

• 表示中ページにある10件の記事の日付を元にして考えないと行けない
• 表示中ページの最初の記事の日付より最近の記事を・・・とするとgetStaticPropsのgetPostsBeforeを変える必要が出てくる
• 条件分岐超絶苦手

そういった時はアルパカ先生の記事を再読するに限る。

参照：アルパカブログ_Notion Blogで過去の記事を遡れるようにページネーションを実装する

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

詳細：https://nextjs.org/docs/basic-features/data-fetching#fallback-blocking

• ビルド時にはパスを作らない
• 初めのリクエストでSSR(Server-side Rendering)してHTMLを返す
• パスを記録しておいて同じパスがリクエストされたら再利用する
• 更新したい場合はISR(Incremental Static Regeneration)を使う

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

• 事前に用意していたページにリクエストがあると最初は記録しておいたページを表示する
• その間にリクエストが発生しても記録機能は休まず営業
• その間Next.jsは新たなページの生成に励む
• 一旦更新できれば古い記録は無効となる

「その間」の設定はgetStaticPropsのreturnの一部revalidate で設定しておく。

[date].tsxを見てみると・・・

• リクエスト時にパスを一度作ったらその後は再利用する
• 更新する場合はISRのrevalidateを設定する

詳細：https://nextjs.org/docs/api-reference/next/router#routerback

[date].tsxを見てみるとrouter既にある！！

結果は・・・・

ボタンを押して戻るかを確認

戻った＼(^o^)／

でも最後のページはNext Pageボタンも表示されない。

原因はこの条件分岐。

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

一番過去ページの最後の記事に最初に書いた記事がくるので弾かれている

[date].tsxに追記

結果：

Next Pageボタンの上に移動

<button>を<a>に変更してCSSクラスも用意

CSS参考記事：サルワカ_CSSで作る！押したくなるボタンデザイン100（Web用）

結果：

２つのボタンを１つの塊にしてCSSの方でFrexboxを設定する

参考記事：CSSのFlexboxとは？横並びレイアウトの新定番になるかも！

結果：

できた＼(^o^)／

ボタンを設置するのにネットからいいサンプルコードを見つけ、

意味も分からず追記してみたら意外と問題なく動いて

できた気でいたんだけど。。。。。

改めてこの記事を書くために必要な情報を整理していけばしていくほど

「あれ？この記述いらないよね？」

ってコピペして使っていたボタンの不要な記述が明らかになりました。

本当は作ってすぐ執筆したかったけど、

説明できるほどクリアになっていなかったので

モヤモヤしたままCSSをいじり倒して

発散させていた結果、

ブログの確認用スクショの見た目が違ったものになってしまいました。m(_ _)m

いりじ倒していた期間に発見した

サムネの表示方法については

後日投稿しようと思っています＼(^o^)／

Next pageのボタンはcomponents/blog-part.tsx

https://github.com/herohoro/easy-notion-blog-02/blob/master/components/blog-parts.tsx#L157-L182

Back・Nextボタンはcomponents/nextBackpage.tsx

https://github.com/herohoro/easy-notion-blog-02/blob/master/components/nextbackpage.tsx

一番古いページに表示されるbackボタンはcomponents/backpage.tsx

https://github.com/herohoro/easy-notion-blog-02/blob/master/components/backpage.tsx

Reactを使う部分が別ファイルにしておかないといけなくなり

３つになっています。

でも内容は同じです(*´ω`*)(*´ω`*)

Next.js13でどんな変更があったかについては

こちらの記事で解説しています⭐