How can I integrate Hygraph with Next.js for Static Site Generation (SSG)?
You can integrate Hygraph with Next.js by using getStaticPaths and getStaticProps to pre-render pages at build time. Hygraph's GraphQL API allows you to query data for your pages, and you can use tools like graphql-request to fetch event slugs and details. For a step-by-step example, see this blog post and the GitHub repo by Leigh Halliday.
How does Hygraph support dynamic static site generation with Next.js?
Hygraph enables dynamic static site generation by allowing you to fetch dynamic paths from its GraphQL API and use Next.js's fallback: "blocking" option. This lets you pre-render popular pages and generate others on-demand, caching them for future requests. See the implementation details in the blog post.
How can I use client-side data loading with Hygraph and Next.js?
You can use the SWR library in Next.js to fetch rapidly changing data from Hygraph's GraphQL API on the client side. This is useful for loading related data, such as user-generated memories for events, after the initial page load. For code examples, refer to the blog post.
How do I securely create new content in Hygraph from a Next.js application?
To securely create new content, use Next.js API routes as serverless functions. Collect user input in a form, send it to your API route, and then perform a GraphQL mutation to Hygraph using a Permanent Auth Token (with appropriate permissions). This keeps sensitive credentials out of the client. See the full flow in the blog post and Hygraph documentation.
What permissions are required to perform mutations in Hygraph?
To perform mutations, you need a Permanent Auth Token with read, update, and read versions permissions on the Event model, and read, create, and read versions on the Memory model. For details, see Hygraph's authorization documentation.
Features & Capabilities
What core features does Hygraph offer?
Hygraph provides a GraphQL-native architecture, content federation, scalability, and a wide range of integrations (including Netlify, Vercel, Shopify, BigCommerce, AWS S3, Cloudinary, Lokalise, and more). It supports rapid content delivery, robust security, and an intuitive interface for both technical and non-technical users. For a full list, visit Hygraph Features.
Does Hygraph provide an API for content management?
Yes, Hygraph offers a powerful GraphQL API for fetching and managing content. You can perform queries and mutations, enabling both read and write operations. Learn more at the Hygraph API Reference.
What integrations are available with Hygraph?
Hygraph integrates with hosting platforms (Netlify, Vercel), eCommerce solutions (Shopify, BigCommerce, commercetools), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (AWS S3, Cloudinary, Bynder, Aprimo, Mux, Scaleflex Filerobot), personalization (Ninetailed), AI (AltText.ai), and more. See the full list at Hygraph Integrations.
How does Hygraph optimize content delivery performance?
Hygraph is designed for rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. Optimized delivery reduces bounce rates and increases conversions. For more details, visit this page.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers enterprise-grade security features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more, see Hygraph Security Features.
Pricing & Plans
What is Hygraph's pricing model?
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For details, visit the pricing page.
Use Cases & Customer Success
Who can benefit from using Hygraph?
Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. It serves modern software companies, enterprises seeking to modernize, and brands aiming to scale across geographies or re-platform from legacy solutions. Source: ICPVersion2_Hailey.pdf
What industries are represented in Hygraph's case studies?
Hygraph's case studies span food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. See examples at Hygraph Case Studies.
Can you share specific customer success stories using Hygraph?
Yes. Komax achieved 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. More stories are available at Hygraph customer stories.
Pain Points & Solutions
What problems does Hygraph solve?
Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting global team needs, clunky content creation), financial pains (high operational costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache and OpenID integration issues). For more, see Hygraph product page.
How does Hygraph solve pain points for different personas?
For developers, Hygraph reduces boilerplate code and streamlines query management. For content creators and project managers, it offers an intuitive interface for independent content updates. For business stakeholders, it lowers operational costs, accelerates speed-to-market, and supports scalability. Solutions are tailored to each persona's needs. Source: Hygraph product page.
Support & Implementation
How easy is it to get started with Hygraph?
Hygraph is designed for ease of use. You can sign up for a free-forever account and access comprehensive documentation, video tutorials, and onboarding guides. For example, Top Villas launched a new project in just 2 months. See Hygraph Documentation and Top Villas case study.
What support and training does Hygraph offer?
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, webinars, and a community Slack channel. For more, visit Hygraph Contact Page.
Business Impact & Metrics
What business impact can customers expect from using Hygraph?
Customers can expect time savings, faster speed-to-market, improved operational efficiency, and enhanced customer experience through scalable and consistent content delivery. For example, Komax achieved 3X faster time to market and Autoweb saw a 20% increase in monetization. Source: Hygraph product page.
What KPIs and metrics are associated with Hygraph's solutions?
Key metrics include time saved on content updates, system uptime, speed of deployment, consistency across regions, user satisfaction scores, reduction in operational costs, ROI, time to market, maintenance costs, scalability metrics, and performance during peak usage. For more, see Hygraph blog on CMS KPIs.
Documentation & Resources
Where can I find technical documentation for Hygraph?
Comprehensive technical documentation is available at Hygraph Documentation, covering API usage, integrations, onboarding, and more.
Where can I find Hygraph's blog and latest updates?
Visit the Hygraph Blog for developer tutorials, product updates, and industry insights.
Next.js with Hygraph: Static Site Generation & API Routes
In this example we will integrate Hygraph with Next.js, taking advantage of SSG for an incredibly performant experience, client-side data loading using SWR.
Written by Leigh
on Jul 05, 2021
This is a contribution from Leigh Halliday. Leigh recently created a memory project using Hygraph and Next.js, covering Static Site Generation & API Routes using a headless CMS.
In his video, see how to use getStaticPaths and getStaticProps alongside Hygraph, additionally creating an API Route which will create new data inside of the CMS using GraphQL Mutations.
Fork the repo and build your own example as you follow along!
Hygraph is a Next.js CMS which exposes your data through a GraphQL API. Immediately I thought of it as read-only, querying data that had been entered through their interface, but that's not the case. You can also perform mutations on your data, allowing users to create content through your own application, while still controlling publishing and approval flows yourself.
In this example we will integrate Hygraph with Next.js, taking advantage of Static Site Generation (SSG) for an incredibly performant experience, client-side data loading using SWR for rapidly changing data, and API routes which securely create content within Hygraph through the exposed mutations.
The example we will be working with today contains two models: Events and Memories. An Event represents a historical event (Obama becoming the first African American president, England winning the World Cup in 1966), where each of these events can have many Memories from people telling their story.
If I were to query the data through GraphQL it may look like:
Static Site Generation isn't typically paired with the word dynamic, but that is exactly what this is. We must first export a function called getStaticPaths which will allow us to tell Next.js which Events to pre-render during build-time.
The goal of this function is to query the Events from Hygraph, returning them as the paths to be used later inside of getStaticProps which we'll cover later. I have used graphql-request to perform the GraphQL query, just asking for each event's slug.
The URL (endpoint) is being stored inside of an ENV variable, which locally lives inside .env.local and is not committed to the repository. Wherever you end up deploying your application will provide you a place to enter these ENV variables into that environment.
The fallback: "blocking" attribute signifies to Next.js that if a request is made to a path NOT returned from this function, it should be generated on the fly in a blocking manner and then cached for future requests. This would allow you to only pre-render your most popular pages, handling the remaining ones in an on-demand basis.
If getStaticPaths has returned 10 events to generate pages for, this function will be called once for each. getStaticProps receives the params returned from getStaticPaths, and has the job of loading the data which will then be passed as props to the actual Page Component.
// pages/events/[slug].tsx
import { serialize } from "next-mdx-remote/serialize";
There are a few special things happening in this code. The first is that the GraphQL query we are sending to Hygraph contains a variable: await client.request(query, { slug });. The slug is passed in so that we can find the matching Event.
The second special thing is that our description field doesn't contain just regular text, it is actually Markdown which we will compile into a source that can be used by MDX to render it as HTML (or any custom component you pass to the MDX renderer). Normally MDX exists locally as a static file, but in this case we are using next-mdx-remote that allows us to use MDX content with getStaticProps inside of Next.js. We'll see how to render this later.
Lastly, I have defined a TypeScript interface called IEvent which is used to let our code know what to expect back from Hygraph and to be passed into our Page Component.
It is now quite simple to render the event inside of our page level component. It receives the event data as a prop, and then we can embed it into the function's response. Here we are using the MDXRemote component to render the compiled Markdown.
We'll be using SWR to load the event's memories on the client after the initial page load. The useSWR hook typically receives two parameters: The key, which in our case is the eventId, and then a fetcher function which will load the data.
Thankfully, graphql-requst works both client-side and server-side, so we can reuse the same client variable from before to perform the GraphQL Query.
// pages/events/[slug].tsx
import useSWR from "swr";
const fetchMemories = async (id: string) => {
const query = gql`
query Memories($id: ID!) {
memories(where: { event: { id: $id } }) {
id
name
story
}
}
`;
return client.request(query, { id });
};
Once we have the data back from useSWR, after checking to make sure data exists (it won't when there is either an error or is still loading the memories), we can render them out as blockquotes.
function Memories({ eventId }: { eventId: string }) {
We've loaded memories, but how do new memories actually get created? It all starts by rendering a form that will collect a name and story. When the user submits the form we will send this data to a serverless function defined at /api/memories/add within our Next.js app.
The reason we are doing it this way (rather than calling the mutation directly) is that mutating data inside of Hygraph requires additional permissions, and a special API Token which we don't want to expose publicly to our users. The flow of the data looks like this:
User enters data into form.
Form data is submitted to /api/memories/add.
This serverless function receives the form data and prepares variables for the mutation.
The form data is then sent to Hygraph via a GraphQL mutation.
function NewMemory({ eventId }) {
const [name, setName] = useState("");
const [story, setStory] = useState("");
// Send the form data to our API route /api/memories/add
Within our serverless function, we can receive the data sent from the form and use this data as the variables within the mutation that will be called to create a new memory within Hygraph.
Something important to keep in mind is that special permissions are required to perform a mutation. You will have to create a Permanent Auth Token within your Hygraph settings and ensure that it has read, update, and read versions permission on the Event model, and read, create, and read versions on the Memory model.
After the Memory is created in Hygraph, it will not be immediately available for users to see on your website. This is because it has been created in a draft state, and won't be seen until it has been published by an admin.
By combining powerful technologies such as Hygraph, GraphQL, Markdown and Next.js, we can create an amazing user experience quickly and performantly. This example showed how to generate Event pages using dynamic Static Site Generation in Next.js, loading additional data client-side with SWR, and finally how to use API routes in Next.js to create data in Hygraph via a GraphQL Mutation.
Blog Author
Leigh Halliday
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.