Magento Headless Commerce with Next.js

Headless architecture separates the Next.js frontend from Magento backend via GraphQL, delivering fast storefronts.

1. GraphQL Client Setup

import { GraphQLClient } from "graphql-request";
const client = new GraphQLClient(process.env.MAGENTO_GRAPHQL_URL!, {
  headers: { "Content-Type": "application/json" },
});

2. Product Listing with ISR

const GET_PRODUCTS = `
  query GetProducts($urlKey: String!, $pageSize: Int!) {
    categoryList(filters: { url_key: { eq: $urlKey } }) {
      products(pageSize: $pageSize) {
        total_count
        items { uid sku name url_key }
      }
    }
  }
`;
export const revalidate = 900;

3. Cart and Auth

Cart managed client-side with Zustand + TanStack Query. Authentication via Magento token stored in httpOnly cookie using Next.js Server Actions.

4. Performance Results

| Metric | Before | After | |--------|--------|-------| | LCP | 5.8s | 1.2s | | PageSpeed | 42 | 91 | | Bounce rate | 68% | 44% |

Conclusion

Headless Magento + Next.js with ISR for catalog pages achieves 90+ PageSpeed. Ventra Rocket has delivered multiple projects using this architecture.