Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ありがとうございました。