Making WooCommerce headless with Next.js

1

Making WooCommerce headless and pairing it with a frontend framework like Next.js can modernize the user experience. In a headless setup, WooCommerce only functions as the backend, and Next.js will be the frontend, communicating with WooCommerce via API.

This tutorial assumes you have basic knowledge of setting up a WordPress/WooCommerce site and a local development environment. The goal is to create a Next.js app that communicates with a WooCommerce store using WPGraphQL and the WooCommerce GraphQL extension.

Step 1: Set Up WooCommerce

  1. Install and set up a WordPress instance.

    If you haven’t already, install WordPress on a local or remote server.

  2. Install WooCommerce.

    Navigate to Plugins > Add New in the WordPress dashboard, search for “WooCommerce”, install and activate it.

  3. Enable pretty permalinks.

    Go to Settings > Permalinks and select anything other than “Plain”. This ensures the API endpoints work correctly.

Step 2: Add GraphQL Support

  1. Install WPGraphQL.

    Search for the WPGraphQL plugin in the WordPress dashboard under Plugins > Add New, then install and activate.

  2. Install WPGraphQL for WooCommerce.

    This extends the schema to include WooCommerce data. You can find the plugin on GitHub: https://github.com/wp-graphql/wp-graphql-woocommerce. Clone or download the repo, then install and activate it as you would with any WordPress plugin.

Step 3: Create the Next.js App

  1. Install Next.js:

    If you don’t have Next.js and its CLI already, install them:

    npm install next react react-dom

  2. Set Up a New Next.js Project:

    npx create-next-app woocommerce-next --use-npm --template "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
cd woocommerce-next

Step 4: Fetch Data from WooCommerce

  1. Install GraphQL client libraries:

    npm install @apollo/client graphql

  2. Connect Next.js to WooCommerce:

    Create a client to fetch data from WooCommerce using GraphQL. Set this up in a new file, e.g., apollo-client.js:

    import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'YOUR_WORDPRESS_URL/graphql',
  cache: new InMemoryCache()
});

export default client;

    Replace YOUR_WORDPRESS_URL with the URL of your WordPress/WooCommerce site.

  3. Fetch Products in a Next.js Page:

    In one of your Next.js pages, e.g., pages/products.js, you can fetch and display products:

    import { gql } from '@apollo/client';
import client from '../path-to-apollo-client';

export async function getStaticProps() {
  const { data } = await client.query({
    query: gql`
      query Products {
        products {
          nodes {
            id
            name
            ... // other fields you want to fetch
          }
        }
      }
    `,
  });

  return {
    props: {
      products: data.products.nodes,
    },
  };
}

function Products({ products }) {
  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          {product.name}
          {/* render other product details */}
        </div>
      ))}
    </div>
  );
}

export default Products;

Step 5: Expand and Style Your App

From here, you can further fetch other details, style your app, add interactivity, handle cart functionality, etc.

Step 6: Deploy

You can deploy your Next.js app using platforms like Vercel, Netlify, or any Node.js environment.

Note: Security is crucial. Ensure you handle data securely, especially if dealing with customer data or transactions. Before going live, make sure to consult the official documentation and best practices for WooCommerce, WPGraphQL, and Next.js.