Intégrer Shopify dans une Application Web Next.js React

Intégrer Shopify dans une application web Next.js React peut considérablement améliorer votre expérience eCommerce. Next.js offre le rendu côté serveur (SSR) rapide et la génération statique (SSG), tandis que Shopify gère les produits, le paiement et les passerelles de transaction.

---

1. Configurer l’API Storefront de Shopify

Shopify propose une API GraphQL Storefront permettant de récupérer les produits, collections et sessions de commande.

Étapes :

1. Accédez à votre tableau de bord administrateur Shopify.
2. Créez une application privée ou personnalisée avec accès à l’API Storefront.
3. Générez le jeton d’accès à l’API Storefront.

---

2. Créer un Projet Next.js

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

Installez les paquets nécessaires :

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

---

3. Se Connecter à l’API Shopify

Créez un fichier utilitaire 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);
}

Ajoutez les variables d’environnement dans .env.local :

SHOPIFY_STORE_DOMAIN=https://votre-boutique.myshopify.com
SHOPIFY_STOREFRONT_TOKEN=votre_jeton_api

---

4. Récupérer les Produits dans Next.js

Utilisez getStaticProps ou getServerSideProps dans une 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>Produits Shopify</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. Intégration du Checkout

Pour implémenter le checkout, utilisez la mutation checkoutCreate de Shopify et redirigez l’utilisateur vers l’URL de paiement.

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

---

6. Déploiement

• Utilisez Vercel ou Netlify pour déployer votre application Shopify sous Next.js.
• Vérifiez que toutes les variables d’environnement sont bien configurées dans la plateforme d’hébergement.

---

Contactez-nous si vous avez besoin d’une intégration Shopify + Next.js sur mesure avec des fonctionnalités avancées comme des fonctions serverless, des vitrines personnalisées et une performance optimisée.