Headless CMS for Next.js

Hygraph is the ideal Headless CMS for Next.js websites and applications. Read further to learn how our API-first CMS allows you to add components to your Next.js apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Fetching data from the headless CMS in Next.js

First, you need to set up a GraphQL client using Apollo in a Next.js environment. The Apollo Client is configured with the URI of the GraphQL endpoint. A GraphQL query named GET_PRODUCTS is defined to request specific fields (name, description, image, availability, slug) for products.

The function getProducts uses the Apollo Client to execute this query and fetch the data, which it then returns. This setup allows for querying the GraphQL API and retrieving structured product data.

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

// Initialize Apollo Client
const client = new ApolloClient({
  uri: 'https://api-<region>.hygraph.com/v2/<some hash>/master',
  cache: new InMemoryCache(),
});

// GraphQL query
const GET_PRODUCTS = gql`
  query GetProducts {
    products {
      name
      description
      image
      availability
      slug
    }
  }
`;

// Function to fetch data
export async function getProducts() {
  const { data } = await client.query({
    query: GET_PRODUCTS,
  });
  return data.products;
}

Step #2 - Using fetched data in a Next.js page or component

Now, you can use the fetched data in a Next.js page or component. It starts with a React functional component named ProductsPage. Inside this component, a state variable products is declared to store the fetched product data. The useEffect hook is utilized to call the getProducts function (from the first block) on component mount. Once the data is fetched, it is stored in the products state variable.

This state is then used to render a list of products, displaying their names, descriptions, and other details. This approach showcases how to integrate asynchronous data fetching into the React component lifecycle in a Next.js application.

import { useEffect, useState } from 'react';
import { getProducts } from './api/graphql';

function ProductsPage() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function loadData() {
      const fetchedProducts = await getProducts();
      setProducts(fetchedProducts);
    }

    loadData();
  }, []);

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map((product) => (
          <li key={product.slug}>
            <h2>{product.name}</h2>
            <p>{product.description}</p>
            {/* Display product image and other details */}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductsPage;

Start building with Next.js

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Next.js project.

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Next.js website or app.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your Next.js project

Take the power of Next.js and combine it with a headless CMS for your Progressive Web Application, eCommerce store or Desktop app project.

Next.js boasts incredible server side rendering, static exporting, CSS-in-JS and comes with all the boilerplate configured for an out of box ready experience. Paired a Headless CMS with Nextjs, teams will reap the benefits of a highly performant site that gives more independence to to the marketing team without compromising developer experience.

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started