Slide 1

Slide 1 text

Next.jsとWordPressで 初めてのJamstack体験記 -Pagination実装- 2021.10.28 ジャムジャム!!Jamstack_ 【初⼼者歓迎LT会 @minamitakao_web

Slide 2

Slide 2 text

15年間サラリーマンでキャリアを積み上げ 2021年9⽉独⽴。 #駆け出しの フリーランス コーダー マネージャー Webデザイナー ⾃⼰紹介 Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- 南貴夫(みなみたかお) 2男‧1⼥のお⽗ちゃんです。⼦供達との時間が⼀番の幸せです。 @minamitakao_web mono_croom mono_croom https://cwt.jp

Slide 3

Slide 3 text

作ってみてた Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- https://cwt.jp Webサイトの採⽤技術に フォーカスしたギャラリーサイト

Slide 4

Slide 4 text

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のコア機能を使った実装に切り替えする。

Slide 5

Slide 5 text

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 { const data = await fetchAPI(` { posts(first: ) { pageInfo { offsetPagination { total } } } } `) return data?.posts.pageInfo.offsetPagination } /pages/page/[num].jsx /lib/api.jsx 総ページ数を問い合わせます。 総ページ数を分割数で割って必要になるパスの情報を返します。

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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- )*

Slide 8

Slide 8 text

Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- /components/pagenatoin.jsx 実装イメージ:8個並ぶ 5以降は1から順に消えて数字の⼤きい⽅が1つ増える < > < > < > 固定値 パラメーターnumから設定。 カレントの番号から順に設定

Slide 9

Slide 9 text

Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- /components/pagenatoin.jsx splitpoint 中央値 [ , , , , , , , ] 準備配列 num カレントページ番号 val 準備配列の各数値 num = num - splitpoint 変化量 をそれぞれに適⽤して求める

Slide 10

Slide 10 text

Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- /components/pagenatoin.jsx splitpoint 中央値 [ , , , , , , , ] 準備配列 num カレントページ番号 val 準備配列の各数値 val + ( num - splitpoint) num =

Slide 11

Slide 11 text

Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- /components/pagenatoin.jsx - 最⼤値からはみ出た 分だけ準備関数を ずらしてみる ( (num - splitpoint) - ((newnum - lastnum)- ) ) splitpoint 中央値 newnum 準備配列をもとに 求めた数値 num カレントページ番号 lastnum 最⼤値

Slide 12

Slide 12 text

Next.js側の実装について Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装- なんとか要件通りに機能しました。

Slide 13

Slide 13 text

ありがとうございました。