Integrating Shopify into a Next.js React Web App

Integrating Shopify with a Next.js React web app can supercharge your eCommerce experience. Next.js provides fast, server-side rendering (SSR) and static site generation (SSG), while Shopify handles product management, checkout, and payment gateways.

1. Setup Shopify Storefront API

Shopify offers a Storefront GraphQL API that can be used to fetch products, collections, and checkout sessions.

Steps:

1. Go to your Shopify admin dashboard.
2. Create a private app or custom app with Storefront API access.
3. Generate the Storefront API token.

2. Create a Next.js Project

npx create-next-app@latest shopify-next-app
cd shopify-next-app

Install required packages:

npm install @shopify/hydrogen react-query graphql-request

3. Connect to Shopify API

Create a utility file lib/shopify.ts:

import { GraphQLClient } from 'graphql-request';

const endpoint = process.env.SHOPIFY_STORE_DOMAIN + '/api/2023-04/graphql.json';
const client = new GraphQLClient(endpoint, {
  headers: {
    'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_STOREFRONT_TOKEN || '',
  },
});

export async function fetchShopifyData(query: string, variables = {}) {
  return client.request(query, variables);
}

Add environment variables to .env.local:

SHOPIFY_STORE_DOMAIN=https://your-shop.myshopify.com
SHOPIFY_STOREFRONT_TOKEN=your_api_token

4. Fetch Products in Next.js

Use getStaticProps or getServerSideProps in a page:

import { fetchShopifyData } from '../lib/shopify';

const PRODUCTS_QUERY = `
{
  products(first: 5) {
    edges {
      node {
        id
        title
        handle
        images(first: 1) {
          edges {
            node {
              src
              altText
            }
          }
        }
        variants(first: 1) {
          edges {
            node {
              priceV2 {
                amount
              }
            }
          }
        }
      }
    }
  }
}
`;

export async function getStaticProps() {
  const data = await fetchShopifyData(PRODUCTS_QUERY);
  return { props: { products: data.products.edges } };
}

export default function Home({ products }) {
  return (
    <div>
      <h1>Shopify Products</h1>
      <ul>
        {products.map(({ node }) => (
          <li key={node.id}>
            <h2>{node.title}</h2>
            <p>${node.variants.edges[0].node.priceV2.amount}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

5. Checkout Integration

To implement checkout, use Shopify's checkoutCreate mutation and redirect users to the checkout URL.

const CREATE_CHECKOUT = `
mutation checkoutCreate($lineItems: [CheckoutLineItemInput!]!) {
  checkoutCreate(input: { lineItems: $lineItems }) {
    checkout {
      webUrl
    }
  }
}
`;

6. Deployment

• Use Vercel or Netlify for deploying your Next.js Shopify app.
• Ensure all environment variables are set in the hosting platform.

---

Contact us if you need a custom Shopify + Next.js integration with advanced features like serverless functions, custom storefronts, and optimized performance.

---