momonoki1990 / nextjs-shopify-store Goto Github PK

例えば、Header.tsxをAtomic Designに沿ってもっと細かく分ける(/components/common/Header/CartLink.tsxなど)
コンポーネント・ファイル設計を調べた上で。

コレクションページに並び替え機能を追加したい

在庫数をあらかじめ保持しておいて、カートの中の数量がそれを上回ったら警告を出すようにする

以下の箇所など、不要な再レンダリングが発生していそうな場所があるので、メモ化することでパフォーマンスを上げたい

• カートに追加する
• 画像の切り替え
• オプションの切り替え

そもそも、useCallbackでページ全体を覆っていることから再レンダリングが常に発生していることも、パフォーマンスを検討した上で、Recoilへの移行などを検討してみたい。

商品ページで画像一覧表示にSwiperを使っているが、ページネーションのボタンが画像と重なっているので、修正する。

• upgrade Next.js
• set and execute eslint

• サムネイルをクリックしたときに切り替わるのが遅い
• そもそもサムネイル画像が表示されるのが遅い

StoreFrontAPIを叩く際のコストの計算が確かドメイン単位だったが、getServerSidePropsで商品情報などを取得すると、同じドメインのサーバー側で叩いていることになりコスト超過しないか調査の上対応。

商品詳細ページでSwiperを使用して画像一覧を表示しているが、ページネーションのボタンが画像に重なっているので、画像を内側に寄せる。

現在ベタがきのため、ストア名をjs-buy-sdkかStoreFront APIから取得する

ProductDetails.tsx でproductオブジェクトから取得しているdescriptionHtmlがProduct typeにはないとエラーが出るので、型を拡張する(js-buy-sdkとstore front apiの仕様があっていない？)

javascript-buy-sdkを使って/collections/allページを作成する(デザインは簡易で、とりあえず一覧表示、可能であればページネーションできればおK)

Swatch.tsxでrouter.replaceを実行しているが、setVariantなどと合わせて2回レンダリングが走ってしまっている。
→レンダリングを走らせずに、クエリパラメータを書き換えたい。

参考:
Silently replacing a URL #1938
vercel/next.js#1938

next.js router.replace without rendering
https://www.google.com/search?q=next.js+router.replace+without+rendering&sxsrf=ALeKk03r2ycqJo6TDqDt4ogbPgpoEaB07A%3A1621336656373&ei=UKKjYKanFuLd-QbAz4_AAQ&oq=next.js+router.replace+without+rendering&gs_lcp=Cgdnd3Mtd2l6EAM6BQgAELADOgkIABCwAxAIEB46BwgjEOoCECc6BAgAEEM6BAgAEAQ6CggAELEDEIMBEAQ6BAgjECc6BQgAELEDOgIIADoGCAAQBBAKOgQIABAeOgYIABAKEB46BwgAEAoQywE6BggAEAgQHjoFCCEQoAE6BQgAEM0COgQIIRAVOgcIIRAKEKABUIG6pBJYmailEmCfqqUSaAdwAHgAgAHUAYgBrSKSAQcyMy4xOC4xmAEAoAEBqgEHZ3dzLXdperABCsgBAsABAQ&sclient=gws-wiz&ved=0ahUKEwimj9vbjdPwAhXibt4KHcDnAxgQ4dUDCA4&uact=5