DEV Community

Cover image for Next.js Shopify eCommerce Starter with Perfect Web Vitals 🚀
Jakub Jabłoński
Jakub Jabłoński

Posted on

Next.js Shopify eCommerce Starter with Perfect Web Vitals 🚀

Hey, we are coming again with a Next.js boilerplate made by Blazity.
This time it's a brand new enterprise-commerce - ⚡ Next.js storefront for high-performance eCommerce with AI features and one-click deployment.
✨ Live demo here

Architecture

Architecture graph

In Enterprise Commerce high-level architecture, Meilisearch serves as the primary source for all product data and potentially other types of data in the future. The system is designed to easily integrate AI personalization tools without needing to modify any frontend code. While we are integrated with Shopify by default, we are not tightly bound to it, and you can use any system that works with Meilisearch and can adapt data to our format.

From a structural viewpoint, we use a monorepo (Turborepo) to manage packages, even though we currently have only one Next.js app. We chose this setup because it prepares us for future developments, which will include additional apps. This arrangement helps keep the packages well-separated and self-contained.

Features

🔀 Next.js App Router & Turborepo
⚛️ React Server Components (RSCs), Suspense and Streaming
🖥️ Server Actions
🖼️ Dynamic OG Images
🧠 AI Vector Search
⚡ Lightning fast search & filtering
✏️ Designed with v0
📸 AI Image captioning
🏎️ Perfect Performance & SEO
🔎 Extremely strict TypeScript
✏️ Draft Mode
📊 A/B Tests
🎨 TailwindCSS, Shadcn UI
📈 Analytics (GTM, Vercel)
💡 Highly Scalable SEO Redirects (Bloom Filters)
🏗️ Complete and fast CI/CD pipelines
🌐 Platform agnostic (integrated with Shopify by default)
📝 Easy migration - migrate your existing solution in minutes
✅ Conventional commits git hook
🎭 Playwright - write end-to-end tests like a pro
📚 Storybook - create, test, and showcase your components
⚙️ T3 Env - manage your environment variables with ease
🔧 Patch-package - fix external dependencies without losing your mind
🔗 Components coupling and cohesion graph - a tool for managing component relationships

Check out the code at ✨ GitHub

Top comments (0)