[Shopify] Next.js Commerceで作成されたサイトが早すぎた。これが未来か。

先日Twitterを見ていると

Next.js Commerce
すごいの来た。https://t.co/3cKHn3E49S

ヘッドレスコマースサイトを作れるNext.jsのスターターキット。Shopifyなど様々なプラットフォームをバックエンドに利用可能。

デモサイトの表示速度がやばし。https://t.co/vfJa2LOLe4

— 佐藤昭太 / non-standard world (@shotasato_nsw) October 27, 2020

 ノンスタの佐藤さんがNext.jsがヤバイ。といったツイートをされていました。

まだShopifyと接続はできないようなのですが、将来的にShopifyをバックエンドとして使用できるようになるとのことです。

Next.jsで作成されたECサイトか。と軽い気持ちで開いて見たのですがノンスタ佐藤さんのツイートの通り、デモサイトの表示速度が爆速でした！！

これはECサイトのスタンダードが変わる気がします。

Next.js Commerceのデモサイト

まず最初にNext.js Commerceのデモサイトを見ていただいた方が早いかと思うので、リンクを貼っておきます。

https://demo.vercel.store/　（公式デモサイト）

トップページの表示そくども早いかもしれませんが、特筆すべきはこちらのコレクションページです。

https://demo.vercel.store/search/designers/acme/apparel

こちらでソートの変更や、カテゴリの変更を行って見てください。爆速じゃ無いですか？しかもURLもちゃんと変更されているのです。

このコレクションページの中から商品を選択して、商品詳細も開いて見てください。早い。。爆速なんて話では無いです。ちょっとWEBページの概念が覆りました。。

Next.jsとは

そもそもNext.jsというものを完全に理解していなかったので調べて見ました。

わかったことは

• Next.jsはReact用のフレームワーク
• ReactアプリのSSR（サーバーサードレンダリングを可能にする）
• SSRによってサイト表示速度がさらに高速化

です。

ざっくり言うと、ReactでSSR（エスエスレアみたい、、）してレンダリングを高速化してサイト表示速度を爆上げできるフレームワークといった感じでしょうか。（素人目線。。）

何にせよ、Reactを学ぶ時がきましたね、みなさん。

ECサイトにおけるページ表示速度の重要性

この記事で、ページの表示速度について述べてきましたが、そもそもECサイトにおいて何故ページ表示速度が重要なのかもついでにご紹介します。

ECのミライを考えるメディアによるとページの表示に3秒以上かかってしまうと40%近くの人が離脱してしまい、Amazonでも表示速度が0.1秒遅れると売り上げが1%落ちてしまうという風に記載されています。

最近Shopifyの管理画面でもページの表示速度が表示されるようになりました。

管理画面→オンラインストア→テーマ

 この表示速度のレポートを表示してみると、いつの時点でページ速度が下がってしまったかなどページ速度を遅くしてしまう要因を探すこともできるようにアップデートされています。

このようにページ速度が重要視される風潮が出てきた中だからこそ、今回のNext.jsの発表はEC界隈に衝撃を与えています。

Next.js Commerceで作成されたサイトが早すぎた。これが未来か。まとめ

このようにNext.jsは非常に重要視されてきており、ECサイト開発者にとっては将来的に必須なスキルになるかも知れません。今までコーディングとjQueryで対応していた私もついにReact, Next.jsを学ぶ時がきたなぁと実感しています。

現状こちらはShopifyに対応してはいませんが、Next.jsのサイトにはちゃんとShopifyにも対応することが示唆されていました。

https://nextjs.org/commerce

具体的な日時はまだ不明ですが、早く知識をつけてNext.jsデモサイトのようなサクサクページを作れるようになりたいなぁ。

それでは、本日も良い1日を！