Deploying a Next.js Store on commercetools

Deliver a sub-second Next.js website on commercetools with Layer0

Next.js is an open-source React-based isomorphic framework for server-side rendered (SSR) apps. To ensure speedy page loads, Next.js automatically splits code and dynamically generates  HTML every time a new request comes in with the use of a server. Key benefits of Next.js include: built-in server-side rendering, automatic code splitting, page caching and route prefetching, file-system routing, and CSS-in-JavaScript styling. 

commercetools is an API-first, microservice-backed, cloud-based eCommerce platform. This architecture allows enterprises to transform to a modern commerce architecture quickly, separating the frontend presentation from the backend functionality to allow for seamless shopping experiences across all digital touchpoints. The platform offers a proprietary frontend names SUNRISE Starter Project and a robust API available named commercetools API. The API has a catalogue of 300+ endpoint which allow the platform to offer a modular, customizable architecture. While commercetools offers some the best APls among the leading eCommerce platforms, it does not run JavaScript or AMP server-side. To their credit, thought, the platform understands that Sunrise Starter framework is limited and they support free open-source third-party frameworks as well.

Layer0 lets you deliver your Next.js storefront on commercetools in sub-seconds. The average website on Layer0 see median speeds of 320ms loads, as measured by Largest Contentful Paint . But, Layer0 is much more than a website accelerator. It is a Jamstack platform for eCommerce. Layer0 makes websites faster for end-users and simpler for frontend developers to maintain. The platform was built specifically for large-scale, database-driven websites such as eCommerce and Travel and comes withthe following benefits: 

  • Jamstack for eCommerce via pre and just-in-time rendering
  • Zero latency networking via prefetching of data from your product catalog APIs
  • An edge that can be configured natively within your Next.js app (CDN-as-JavaScript)
  • Edge rules that can run locally, in pre-prod and production environments  
  • Automated, full-stack preview URLs from GitHub, GitLab, or Bitbucket with every new branch and push
  • Performant split tests at the edge for A/B tests that do not slow down the site, canary deploys, and personalization
  • Serverless JavaScript that is much easier and more reliable than AWS Lambda

On Layer0, your Next.js commercetools store will run in sub-second speeds and your developers will be empowered to control edge caching and reduce rework using the multiple developer productivity tools that come with the platform. 

Browse around Shaper Image, a Next.js commercetools website delivering instant page loads on Layer0. "Everyone here has commented on how blazing fast our site is" -Mihaela Mazzenga, CTO at Sharper Image

Layer0 is a main contributor to React Storefront (RSF), an open source eCommerce PWA framework built on Next.js, which powers over billion dollars in eCommerce revenue a year. Try it out if you are in the process of building a modern frontend for an eCommerce site. Or if you're already using Next.js, use the this guide to deploy your Next.js application on Layer0 and get sub-second loads in as little as 1 hour of work. 

Deploy in minutes

Moovweb XDN works with all frontends
Deploy freeTakes 2 minutes