Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

This is a fully dynamic, server-rendered Next.js app router + headless Shopify storefront. Zero client / CDN page caches, fully personalized, feels as though it was local-first. Try it for yourself!

Guillermo Rauch

566,924 subscribers

66,013 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 Comments

Peter White1 year ago

@nextjs @Shopify Super fast - though optimistic UI for quantity increase in cart would be nice 👀

Guillermo Rauch1 year ago

@nextjs @Shopify yessss. want. cc @leeerob

Jorge Vizcayno1 year ago

@nextjs @Shopify I'm sure if you convert the into a real Vercel Swag store instead of Acme products, you'd get both more insights on how to keep improving and some revenue from ver el powerusers

Baytaş1 year ago

@nextjs @Shopify wen page transitions tho

Sukh Dugal1 year ago

@nextjs @Shopify If a demo store feels so slow and clunky, I can't imagine what a real store's UX feels like. Can someone without bias chime in — is running two web servers across locations to render a page not a bad idea?

Jacob1 year ago

@nextjs @Shopify Darn

Richard Poelderl1 year ago

@nextjs @Shopify It’s fast. But not local first fast.

Guillermo Rauch1 year ago

@nextjs @Shopify how come? If it's the add to cart operation, that's on the todo. will get done

khavas1 year ago

@nextjs @Shopify That's pretty cool!

Related Videos

The fastest storefront I've ever seen. So excited about the new Next.js Commerce powered by App Router. Headless backend by @shopify.

The fastest storefront I've ever seen. So excited about the new Next.js Commerce powered by App Router. Headless backend by @shopify.

Guillermo Rauch

297,023 views • 2 years ago

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

Tom Lienard

42,459 views • 3 years ago

Vercel + Shopify is too good… by 🐖: ◾ 500+ orders processed in *2 minutes* ◾ Built with v0 + Cursor ◾ Fully custom Next.js storefront on headless So long on the web. Anyone can now dream → build → ship → sell

Vercel + Shopify is too good… by 🐖: ◾ 500+ orders processed in 2 minutes ◾ Built with v0 + Cursor ◾ Fully custom Next.js storefront on headless So long on the web. Anyone can now dream → build → ship → sell

Guillermo Rauch

72,068 views • 8 days ago

It happened! I’ve open sourced my exif-based photo blog as a (near) zero-config Vercel template. It uses all the things: ◆ Next.js App Router with Server Actions ◆ Next.js Image ◆ Next Auth ◆ Vercel Postgres ◆ Vercel Blob ◆ Vercel OG Template →

It happened! I’ve open sourced my exif-based photo blog as a (near) zero-config Vercel template. It uses all the things: ◆ Next.js App Router with Server Actions ◆ Next.js Image ◆ Next Auth ◆ Vercel Postgres ◆ Vercel Blob ◆ Vercel OG Template →

Sam Becker

125,818 views • 2 years ago

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

Delba

50,434 views • 1 year ago

This is a fully functioning Laravel application and playground rendered on a static Cloudflare page. The entire app is sandboxed to your client, all files are editable, and you can even run artisan commands.

This is a fully functioning Laravel application and playground rendered on a static Cloudflare page. The entire app is sandboxed to your client, all files are editable, and you can even run artisan commands.

Andrew Schmelyun

12,266 views • 4 months ago

Screenshot to Shopify store with Instant MCP is now live. Screenshot any store you like. Instant AI turns it into a working Shopify build. Fully responsive. Fully functional. Fully connected. What used to take days now takes minutes. Try it in Instant.

Screenshot to Shopify store with Instant MCP is now live. Screenshot any store you like. Instant AI turns it into a working Shopify build. Fully responsive. Fully functional. Fully connected. What used to take days now takes minutes. Try it in Instant.

Coen van Hees

19,791 views • 1 month ago

URL to Shopify store with Instant MCP is now live. Paste in any URL of a store you like. Instant AI turns it into a working Shopify build. Fully responsive. Fully functional. Fully connected. What used to take days now takes minutes. Try it in Instant

URL to Shopify store with Instant MCP is now live. Paste in any URL of a store you like. Instant AI turns it into a working Shopify build. Fully responsive. Fully functional. Fully connected. What used to take days now takes minutes. Try it in Instant

Coen van Hees

28,137 views • 1 month ago

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

Elixir by Software Mansion

13,509 views • 6 months ago

is a great Next.js app router app. It's blazing fast, even with data being highly dynamic (it shows realtime stock market data & politicians' trades) Some cool details from my analysis 🧵

is a great Next.js app router app. It's blazing fast, even with data being highly dynamic (it shows realtime stock market data & politicians' trades) Some cool details from my analysis 🧵

Guillermo Rauch

91,310 views • 1 year ago

Support Local Business 📌 Only R100? Let’s see what I can get at SKUBU 😅 SKUBU is the world’s first fully automated refill store and it offer high demand staple foods at unmatched prices Try it for yourself. 😁

Support Local Business 📌 Only R100? Let’s see what I can get at SKUBU 😅 SKUBU is the world’s first fully automated refill store and it offer high demand staple foods at unmatched prices Try it for yourself. 😁

Black-Jesus💧🇿🇦

54,050 views • 4 months ago

Next.js 15: <Form> • Prefetching • Client-side navigation • Progressive enhancement It is useful for forms that navigate to a new page, such as a search form that leads to a results page.

Next.js 15: <Form> • Prefetching • Client-side navigation • Progressive enhancement It is useful for forms that navigate to a new page, such as a search form that leads to a results page.

Delba

67,908 views • 1 year ago

!Boring If this was going to be a camera app people would love, it had to do 4 things… 1. Feel satisfying in your hands (like a real camera) This is our first fully-3D interface with dynamic lighting that responds to movement, satisfying sounds, & custom haptics. Feels damn good.

!Boring If this was going to be a camera app people would love, it had to do 4 things… 1. Feel satisfying in your hands (like a real camera) This is our first fully-3D interface with dynamic lighting that responds to movement, satisfying sounds, & custom haptics. Feels damn good.

Andy Allen

34,943 views • 1 year ago

SSR in Pages Router vs App Router in Next.js

SSR in Pages Router vs App Router in Next.js

Alex Sidorenko

61,064 views • 1 year ago

Update on Meet the Exia, the first 34 seconds are fully finished now! I've animated more but won't show it until it's more polished so have this fully rendered teaser!

Update on Meet the Exia, the first 34 seconds are fully finished now! I've animated more but won't show it until it's more polished so have this fully rendered teaser!

Dwheim 🇨🇴

32,239 views • 1 year ago

VS Code (Copilot) vs Cursor (claude-3.5-sonnet) for Next.js App Router

VS Code (Copilot) vs Cursor (claude-3.5-sonnet) for Next.js App Router

Alex Sidorenko

189,000 views • 1 year ago

oh one more thing. I updated the cli to work cross-framework. Here's me installing a v0 generation for Next.js inside a Laravel app. It auto-detects Laravel and adapts the route. Same payload, zero config. Works for Vite + React Router too.

oh one more thing. I updated the cli to work cross-framework. Here's me installing a v0 generation for Next.js inside a Laravel app. It auto-detects Laravel and adapts the route. Same payload, zero config. Works for Vite + React Router too.

shadcn

51,325 views • 1 year ago

The BEST Rainbow Six Siege Gamemode EVER! Prop Hunt is fully playable, try it for yourself! Thanks to the "Heated Metal" mod 🔥

The BEST Rainbow Six Siege Gamemode EVER! Prop Hunt is fully playable, try it for yourself! Thanks to the "Heated Metal" mod 🔥

KianChopper

104,823 views • 28 days ago

If you're looking to setup i18n for Next.js (App or Pages Router), check out next-international: ✨ Fully typesafe, no codegen 🦥 Small footprint, lazy-loaded locales 📄 Static Rendering, RSC... We've landed a ton of bugfix & features recently!

If you're looking to setup i18n for Next.js (App or Pages Router), check out next-international: ✨ Fully typesafe, no codegen 🦥 Small footprint, lazy-loaded locales 📄 Static Rendering, RSC... We've landed a ton of bugfix & features recently!

Tom Lienard

19,936 views • 2 years ago

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

128,452 views • 1 year ago