This chapter covers
- Establishing the needs of a typical e-commerce site
- Comparing headless e-commerce systems for managing products and checkout
- Choosing a static site generator for an e-commerce site
- Creating and configuring a new site using Next.js
- Building a product listing, product detail, and shopping cart in Next.js
- Importing and using Markdown content in a Next.js site
An e-commerce site has many requirements that might make it seem ill-suited for an architecture based on static assets, as the Jamstack is. While the content aspects, such as product listings and detail pages, can be made to fit easily within a statically generated site, things like shopping carts, checkout processing, and order histories appear too dynamic and interactive to function without server-side rendering.
Up until only a three or four years ago, this is exactly the advice I would give: static site generators were not a good fit for e-commerce sites. However, the Jamstack does more than just build sites with static site generators. A core piece of the Jamstack is its ability to use JavaScript and APIs on the client side to enable dynamic functionality that would otherwise be impossible using static site tooling. Thus, it is entirely possible today to build fully functioning e-commerce sites using the Jamstack.