/shopify-next.js-tailwind

Learn the Shopify + Next.js + Tailwind CSS Stack! SWR, Hydrogen, + more

Primary LanguageJavaScriptMIT LicenseMIT

Welcome to the Shopify + Next.js + Tailwind CSS course

shopify next.js course preview

Live Demo Store | Course

This is a production ready Headless Shopify storefront using Next.js, Shopify Storefront API (GraphQL), Tailwind CSS, and Vercel. This is a project from the "Learn Shopify + Next.js + Tailwind CSS" course available at www.BuildNextShop.com

Topics Covered

  • March 2022 Update: Bonus lectures covering Shopify’s Hydrogen
  • February 2022 Update: Using SWR for automatically updating content on SSG (Static Site Generation) websites.
  • Blazing fast storefronts using Next.js for eCommerce.
  • Managing Cart data with React Context and localStorage.
  • Rapid component development with Tailwind CSS.
  • GraphQL query testing using the GraphiQL app.
  • Shopify Partners Account and Dashboard.
  • Shopify Storefront API (GraphQL).
  • Vercel for deployment.

Performance

Overview Performance Breakdown

Future Updates:

This is an ongoing project that is currently released in beta. Future updates will include:

  • Webhooks triggering for product updates, etc.
  • Additional ecommerce ready sections for Next.js using Tailwind CSS (currently 5 are included with the course assets)
  • And much more!

Credits

Big thank you to the Shopify, Vercel, and Tailwind Labs teams for making it so easy and pleasurable to create incredible storefronts with speed.