herohoroブログ

履歴データを再利用して戻るボタンを作る



🔄   2022-12-20

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

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

と数日考えたものの、

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

思い浮かばない原因:

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

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

image block

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

🤔
fallback って2回目以降は履歴から引っ張ってきてくれるのか・・・・

fallbackって?

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

image block

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

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

ISRって?
image block

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

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

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

image block

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

image block
🤔
60秒で1分だから・・・・60分(1時間)ごとってことか!!!

fallbackやISRを調べて分かったこと

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

🤔
1度作ったパスを再利用して1つ前の一覧ページに戻れればいいのかな???

履歴データを使って戻るボタンを作る方法

image block

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

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

image block
image block

😀
<button type="button" onClick={() => router.back()}> </button>の部分を追記すれば作れるね〜〜〜

追記してみる

image block

結果は・・・・

image block

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

image block

戻った\(^o^)/

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

image block

最後のページに戻るボタンを表示させる

原因はこの条件分岐。

image block

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

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

💡
「一致しない」を「一致する」に変更すればOK

[date].tsxに追記

image block

結果:

image block

仕上げ:装飾でボタンをオシャレにしていく(´ε` )

順序を変える
image block

Next Pageボタンの上に移動

image block

統一感を出す
image block

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

image block

CSS参考記事:サルワカ_CSSで作る!押したくなるボタンデザイン100(Web用)

結果:

image block

ボタンを両端に配置する
image block

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

image block

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

結果:

image block

できた\(^o^)/


感想

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

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

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

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

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

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

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

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

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

発散させていた結果、

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

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

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

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


Next.js13でディレクトリが変わりました

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

image block

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

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

image block

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

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

image block

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

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

3つになっています。

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

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

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

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

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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