Next.js Shopify Starter Template

What the Template Includes

• Next.js 14 with App Router: Get the latest features and performance benefits from Next.js.
• Tailwind CSS & ShadCN UI: A utility-first CSS framework and pre-built components for rapid UI development.
• Shopify Storefront API Integration: Pre-configured data fetching for products, collections, and cart.
• Component-Based Architecture: Built with reusable React components for easy customization.
• Environment Variable Setup: Easily connect to your Shopify store with a `.env.local` file.
• SEO Optimized: Includes support for dynamic metadata and JSON-LD schema.

Why It's Useful

Building a headless Shopify store from scratch can be complex. You need to handle data fetching, state management, cart logic, and more. This starter template saves you hours of setup by providing a solid foundation with best practices already implemented. You can focus on building your unique brand experience instead of wrestling with boilerplate code.

Code Example

Fetching products from the Shopify Storefront API is already set up for you. Here’s a glimpse of how it works:

// src/lib/shopify.ts
const domain = process.env.SHOPIFY_STORE_DOMAIN;
const storefrontAccessToken = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN;

async function shopifyFetch({ query, variables }) {
  const endpoint = `https://${domain}/api/2024-04/graphql.json`;
  // ... fetch logic
}

export async function getProducts() {
  const res = await shopifyFetch({
    query: `{
      products(first: 10) {
        edges {
          node {
            id
            title
            handle
          }
        }
      }
    }`
  });
  return res.data.products.edges;
}