[ Back to Resources ](/resources) Contents [Ecommerce systems have evolved](#ecommerce-systems-have-evolved-) [Understanding headless](#understanding-headless) [Minimum risk and optimal stability with Next.js on Vercel](#minimum-risk-and-optimal-stability-with-next.js-on-vercel) [Other benefits to using a Next.js frontend on Vercel, complementing a Shopify backend](#other-benefits-to-using-a-next.js-frontend-on-vercel,-complementing-a-shopify-backend) [How to add Next.js to a Shopify backend in 15 minutes (or less)](#how-to-add-next.js-to-a-shopify-backend-in-15-minutes-\(or-less\)) [ Back to Resources ](/resources) Nov. 21st, 2023 # Fast sites, flexibility, and more conversions with Next.js and Shopify Enhance ecommerce using Next.js and Shopify. Learn how moving to headless results in fast, flexible sites and more conversions for your ecommerce store. ## [Ecommerce systems have evolved](#[object-object])  Once the norm, legacy platforms now create headaches for tech leaders and developers. From low SEO performance to hindering creativity, full stack solutions cannot give your customer the experience your business wants. Pages load slower, engineering teams are bloated and overwhelmed, and developers lack flexibility.  Your business has grown to a point where you need to augment your existing Shopify stack.  It used to be standard to have every aspect of your stack managed in one place, and building a custom frontend was nearly impossible. Ecommerce systems have evolved.  Today, [the narrative has shifted](https://vercel.com/resources/why-innovators-are-going-headless). You can decouple your front and backend, mixing and matching the best of every technology to get the exact user experience you want. With Next.js and Vercel, it’s easy–and you’ll be setting up your team for future success and savings. ## [Understanding headless](#[object-object]) Here are some key terms we’ll be using in this article: **Decoupling** The art of taking the frontend and separating it from the backend.   **Frontend** The frontend of a software stack refers to the user interface, for example a website on a desktop browser or a mobile app.  **Backend** The backend is the rest of the software stack, like customer data, content management, and business logic. This is the part of your stack that the user does not see.  ## [Minimum risk and optimal stability with Next.js on Vercel](#[object-object]) Because Vercel is the creator of Next.js, you will always experience the highest level of stability and support when using Vercel with Shopify. You can rest assured that every new Next.js feature works flawlessly on Vercel, without requiring updates or changes to your infrastructure.   When you decouple with Shopify and Vercel, you end up with an ecosystem that runs off a Shopify backend. No need to migrate your inventory, sales, or other systems’ management–everything connects seamlessly.  | **Vercel** | **Next.js** | | --- | --- | | _Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. By providing the toolkit frontend teams love and delivering global edge infrastructure, Vercel unlocks developer potential and enables anyone to build the future of the Web._ | _Created by Vercel, Next.js is the fullstack React framework for the Web. With over 3 million downloads per week, Next.js is used by the largest companies in the world. Next.js provides the tools necessary for React and web developers to iterate faster and ship quality web sites and applications._ | ## [Other benefits to using a Next.js frontend on Vercel, complementing a Shopify backend](#[object-object]) **Make changes quickly** Enjoy fast-loading sites and the deployment speed and flexibility of Vercel, paired with the strong ecommerce backend of Shopify. **Build a modern mobile strategy** Create a custom, high-performance mobile app. The all-in-one Shopify experience makes it difficult or cost-prohibitive to build the dynamic, customized app your business needs.  **Use separate CMS providers** Use the content provider of your choice (i.e. [Contentful](https://vercel.com/integrations/contentful) or [DatoCMS](https://vercel.com/integrations/datocms)) while still maintaining the best parts of Shopify ecommerce backend and solutions. **Scale for high traffic moments** Increase site reliability and reduce risk. With a Next.js frontend and Shopify backend, you can rest easy knowing that your site can handle high traffic and scale automatically. **Future proof** If your business needs to change ecommerce platforms, you can smoothly switch out the Shopify backend and make a clean migration. Keep your tech stack up-to-date at all times.  **Customization** Build a highly customized website for the best customer experience. Additionally, enjoy an A/B testing workflow that takes the pressure off your engineering team. Maintain control of your brand. ## [**How to add Next.js to a Shopify backend in 15 minutes (or less)**](#[object-object]) If you’re ready to experience the benefits that come with a more modern stack, here’s how to add Next.js to your Shopify backend in 15 minutes or less: 1. Visit [vercel.com/new](https://vercel.com/new), and select the [Next.js Commerce template](https://vercel.com/new/clone?demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20e-commerce%20sites.&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&integration-ids=oac_MuWZiE4jtmQ2ejZQaQ7ncuDT%2Coac_9HSKtXld74NG0srzdxSiBGty&project-name=commerce&repository-name=commerce&s=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&skippable-integrations=1&root-directory=site&build-command=cd%20..%20%26%26%20yarn%20build&showOptionalTeamCreation=false). Then, allow Vercel to set up a repository in your Git account. 2. Add the [Shopify integration](https://vercel.com/integrations/shopify) to your project. Note: Your Shopify environment variables will transfer to your shop automatically, allowing the template to reflect your products, stock, images, and other store info. 3. Sit back—Vercel will now build and deploy your project. 4. Check out your newly created git repo and design your pages to best illustrate your brand.