Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装-

Transcript

1. Next.jsとWordPressで 初めてのJamstack体験記 -Pagination実装- 2021.10.28 ジャムジャム！！Jamstack_ 【初⼼者歓迎LT会 @minamitakao_web
2. 15年間サラリーマンでキャリアを積み上げ 2021年9⽉独⽴。 #駆け出しの フリーランス コーダー マネージャー Webデザイナー ⾃⼰紹介 Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- 南貴夫（みなみたかお） ２男‧１⼥のお⽗ちゃんです。⼦供達との時間が⼀番の幸せです。 @minamitakao_web mono_croom mono_croom https://cwt.jp
3. 作ってみてた Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- https://cwt.jp Webサイトの採⽤技術に フォーカスしたギャラリーサイト
4. WordPress側の実装 Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- 「WPGraphQL Offset Pagination」プラグインを追加 https://github.com/valu-digital/wp-graphql-offset-pagination できればこのプラグインは使うべきではありません。 wp-graphql コアのカーソルはより⾼速で効率的です が、このプラグインは伝統的な WordPress のページ ネーション実装と⽐較して性能を発揮するはずです。 https://www.wpgraphql.com/ / / /forward-and-backward-pagination-with-wpgraphql/ ▪Forward and Backward Pagination with WPGraphQL 宿題：下記を参考にWP GraphQLのコア機能を使った実装に切り替えする。
5. Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- export const getStaticPaths = async() => { const pagesinfo = await getAllPagenations() let paths = []; let pagetotal = Math.floor(pagesinfo.total / PageSplit) if( pagesinfo.total % PageSplit > ) { pagetotal++; } for(let i= ;i<pagetotal;i++) { paths.push(`/page/${i}`) } return { paths, fallback: true, } } export const getAllPagenations = async()=> { const data = await fetchAPI(` { posts(first: ) { pageInfo { offsetPagination { total } } } } `) return data?.posts.pageInfo.offsetPagination } /pages/page/[num].jsx /lib/api.jsx 総ページ数を問い合わせます。 総ページ数を分割数で割って必要になるパスの情報を返します。
6. Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- export const getStaticProps = async({params}) => { const { num } = params; if(num < ) return { notFound: true } const res = await getPagesPosts(num); const allPosts = res.posts; if(allPosts.edges.length< ) return { notFound: true } return { props: { allPosts, categories: res.categories, num } } } /pages/page/[num].jsx
7. Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- export const getPagesPosts = async(num) => { const data = await fetchAPI(`query PostsByPages($offset: Int, $size: Int) { posts(where: {offsetPagination: {offset: $offset, size: $size}}) { edges {（略）} pageInfo { offsetPagination { hasMore hasPrevious total } } } }`,{ variables:{ offset: (num - ) * PageSplit, size: PageSplit } }); return data; } /lib/api.jsx 記事01 記事02 記事03 記事04 記事05 記事06 記事07 記事08 記事09 記事10 記事11 記事12 記事13 記事14 記事15 記事16 記事17 記事18 offset: offset: num: size: size: num: （num- ）* （num- ）*
8. Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- /components/pagenatoin.jsx 実装イメージ：8個並ぶ 5以降は1から順に消えて数字の⼤きい⽅が1つ増える < > < > < > 固定値 パラメーターnumから設定。 カレントの番号から順に設定
9. Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- /components/pagenatoin.jsx splitpoint 中央値 [ , , , , , , , ] 準備配列 num カレントページ番号 val 準備配列の各数値 num = num - splitpoint 変化量 をそれぞれに適⽤して求める
10. Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- /components/pagenatoin.jsx splitpoint 中央値 [ , , , , , , , ] 準備配列 num カレントページ番号 val 準備配列の各数値 val + ( num - splitpoint) num =
11. Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- /components/pagenatoin.jsx - 最⼤値からはみ出た 分だけ準備関数を ずらしてみる ( (num - splitpoint) - ((newnum - lastnum)- ) ) splitpoint 中央値 newnum 準備配列をもとに 求めた数値 num カレントページ番号 lastnum 最⼤値
12. Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- なんとか要件通りに機能しました。
13. ありがとうございました。