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

I was on Twitter the other day.

Next.js Commerce
awesome stuff coming.

https://t.co/3cKHn3E49Sヘッドレスコマースサイトを作れるNext.jsのスターターキット


.


Various platforms like Shopify can be used as backend.

The demo site is very fast. https://t. co/vfJa2LOLe4

- Shota Sato / non-standard world (@shotasato_nsw) October 27, 2020

Mr. Sato of Nonsta is in trouble with Next.js. He tweeted "Next.js is in trouble.

It doesn't seem to be able to connect to Shopify yet, but it will be able to use Shopify as a backend in the future.

An EC site created with Next.js? I opened it with a light heart and saw that the demo site's display speed was blazing fast, just as Nonsta Sato's tweet said it would be!

I feel this will change the standard for e-commerce sites.

Next.js Commerce demo site

First of all, I think it would be faster if you take a look at the Next.js Commerce demo site, so I will post a link to it.

https://demo.vercel.store/ ( official demo site)

The top page may be quick, but it is worth mentioning this collection page.

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

You can change the sorting and categories here. Isn't it a blast? Moreover, the URL has been properly changed.

Please select a product from this collection page and open the product details. It's fast. I'm not talking about the explosion of speed. The concept of a web page has been overturned.

What is Next.js?

I didn't fully understand what Next.js was to begin with, so I looked it up.

What I found out is that

• Next.js is a framework for React
• SSR (server-side rendering enabled) for React apps
• SSR further speeds up site display speed

These are.

To put it roughly, it is a framework that can speed up rendering and increase site display speed by SSR (like SSR, right?) with React. (From a layman's point of view...).

Anyway, it's time to learn React, everyone.

Importance of page display speed in e-commerce sites

In this article, we have discussed page display speed and why it is important for e-commerce sites to have page display speed.

According to the EC Mirai Think Media, if a page takes more than 3 seconds to display, nearly 40% of customers will leave the site, and even Amazon states that a 0.1 second delay in display speed can result in a 1% drop in sales.

Recently, Shopify's admin page also displays page display speed.

Admin → Online Store → Themes

This display speed report has been updated so that you can also look for factors that slow down the page speed, such as when the page speed dropped.

It is precisely because of this emerging trend of placing importance on page speed that Next.js' announcement has come as such a shock to the EC community.

Sites created with Next.js Commerce were too fast. Is this the future? Summary

As you can see, Next.js is becoming very important and may become an essential skill for EC site developers in the future. I have been using coding and jQuery to handle this, and I feel that it is finally time for me to learn React, Next.js.

Currently, this site does not support Shopify, but the Next.js site suggests that it will support Shopify as well.

https://nextjs.org/commerce

The specific date and time is still unknown, but I hope to gain knowledge soon so that I can create crisp pages like the Next.js demo site.

Well, have a nice day!