Hygraph is a GraphQL-native headless content management system (CMS) designed to unify data and enable content federation. It empowers businesses to create impactful digital experiences by removing traditional content management pain points and offering scalability, flexibility, and efficient data querying. Learn more.
What is the primary purpose of Hygraph?
The primary purpose of Hygraph is to unify data and enable content federation, allowing businesses to create impactful digital experiences. It leverages a GraphQL-native architecture to remove traditional content management pain points and supports scalability and efficient data querying.
Who is the target audience for Hygraph?
Hygraph is designed for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises looking to modernize their technologies, and brands aiming to scale across geographies, improve development velocity, or re-platform from traditional solutions.
Features & Capabilities
What features does Hygraph offer?
Hygraph offers a range of features including a GraphQL-native architecture, content federation, scalability, robust integrations, localization support, and an intuitive user interface. It also provides enterprise-grade security, SSO integrations, audit logs, encryption, and sandbox environments. See all features.
Does Hygraph support internationalization and localization?
Yes, Hygraph supports internationalization and localization. You can localize content fields, manage multiple locales, and integrate with translation management systems such as Smartling, Lokalise, EasyTranslate, and Crowdin. Hygraph works seamlessly with Next.js and the next-intl library to create multi-language websites. Learn more about localization.
What integrations does Hygraph offer?
Hygraph offers integrations with hosting and deployment platforms (Netlify, Vercel), eCommerce solutions (BigCommerce, commercetools, Shopify), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), artificial intelligence (AltText.ai), and more. See all integrations.
Does Hygraph provide an API?
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. You can access the API reference and playground for building and testing queries. API Reference.
What technical documentation is available for Hygraph?
Hygraph offers comprehensive technical documentation covering setup, integrations, API usage, and deployment. Access the documentation at https://hygraph.com/docs.
How does Hygraph optimize content delivery performance?
Hygraph emphasizes optimized content delivery performance, which improves user experience, engagement, and search engine rankings. Rapid content distribution and responsiveness help reduce bounce rates and increase conversions. Learn more.
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 full details, visit the Hygraph pricing page.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. These certifications ensure high levels of data protection and security for users. See security features.
How does Hygraph ensure data security and compliance?
Hygraph provides enterprise-grade security features including SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. Learn more about security.
Use Cases & Benefits
Who can benefit from using Hygraph?
Hygraph benefits developers, content creators, project managers, agencies, and enterprises seeking to modernize their tech stack, scale digital experiences, and improve operational efficiency. It is suitable for industries such as food and beverage, consumer electronics, automotive, healthcare, travel, media, eCommerce, SaaS, marketplaces, edtech, and wellness. See case studies.
What business impact can customers expect from using Hygraph?
Customers can expect significant business impacts such as time savings through streamlined workflows, ease of use with an intuitive interface, faster speed-to-market, and enhanced customer experience through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency.
Can you share specific case studies or success stories of customers using Hygraph?
Yes. For example, Komax achieved a 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. See more success stories.
What industries are represented in Hygraph's case studies?
Industries include food and beverage (Dr. Oetker), consumer electronics (Samsung), automotive (AutoWeb), healthcare (Vision Healthcare), travel and hospitality (HolidayCheck), media and publishing, eCommerce, SaaS (Bellhop), marketplace, education technology, and wellness and fitness. See all case studies.
Who are some of Hygraph's customers?
Customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See customer stories.
Pain Points & Solutions
What problems does Hygraph solve?
Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting needs from global teams, clunky content creation), financial pains (high operational costs, slow speed-to-market, expensive maintenance, limited integration, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, OpenID integration challenges). Learn more.
How does Hygraph solve these pain points?
Hygraph provides an intuitive interface for non-technical users, modernizes legacy systems with a GraphQL-native, API-first architecture, ensures consistent branding across regions, streamlines workflows, reduces operational costs, accelerates project delivery, and supports scalability. It also simplifies development by reducing boilerplate code and streamlining query management. See detailed solutions.
What KPIs and metrics are associated with the pain points Hygraph solves?
Key metrics include time saved on content updates, number of updates made without developer intervention, system uptime, speed of deployment, consistency in content across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, scalability metrics, and performance during peak usage. Read more about CMS KPIs.
How do the pain points solved by Hygraph differ by persona?
For developers, Hygraph reduces boilerplate code and streamlines query management. For content creators and project managers, it provides an intuitive interface for independent content updates. For business stakeholders, it reduces operational costs, supports scalability, and accelerates speed to market. See persona-specific solutions.
Implementation & Support
How easy is it to get started with Hygraph?
Hygraph is designed for easy onboarding, even for non-technical users. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. Users can sign up for a free account and access documentation, video tutorials, and onboarding guides. Get started.
What training and technical support does Hygraph provide?
Hygraph offers 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. Contact support.
How does Hygraph handle maintenance, upgrades, and troubleshooting?
Hygraph provides 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers receive dedicated onboarding and expert guidance, and all users can access detailed documentation and the community Slack channel for additional support.
Customer Experience & Feedback
What feedback have customers given about Hygraph's ease of use?
Customers have praised Hygraph for its ease of use and intuitive interface, noting that it is 'super easy to set up and use' and that 'even non-technical users can start using it right away.' The interface is described as logical and user-friendly for both technical and non-technical teams.
Competition & Comparison
Why choose Hygraph over alternatives in the market?
Hygraph stands out with its GraphQL-native architecture, content federation, and scalability. It enables businesses to create impactful digital experiences while reducing costs and improving efficiency. These strengths differentiate Hygraph from traditional CMS platforms and other headless CMS solutions. Learn more.
Technical Requirements
What are the prerequisites for using Hygraph with Next.js internationalization?
You should have a basic understanding of HTML, CSS, JavaScript, and some experience with Next.js. Node.js and npm or yarn should be installed on your local computer. See the full guide.
How to Internationalize your Next.js app with next-intl in App Router
In this guide, we’ll walk you through how to set up internationalization into your Next.js application utilizing the next-intl library, demonstrate how to configure static localized content through and manage and retrieve localized content from Hygraph.
To follow along with this guide and code, you should have the following:
Basic understanding of HTML, CSS, and JavaScript
At least a little experience or knowledge of Next.js
Node and npm or yarn installed on your local computer
#Leveraging next-intl for Next.js internationalization
Next.js offers robust support for internationalization through its built-in i18n routing. This feature is designed to work well with i18n libraries, among which next-intl stands out as it covers a range of functionalities, including interpolation, pluralization, and handling arrays.
It is fully compatible with the Pages Router of Next.js (up to version 12) and the App Router introduced in version 13, which includes support for React server components.
Getting started with next-intl
To integrate next-intl into your Next.js project, start by installing the library with the following command:
npm install next-intl
Once installed, next-intl integrates with the App Router using a [locale]dynamic segment.
#Setting up your Next.js project for internationalization
Organize your project directory by creating a [locale] directory within the /app folder and adding all files to the folder. For example, this is a simple Next.js application structure with three pages moved into the [locale] folder:
|--/app
|--/[locale]
|--/about
|-- page.js
|--/blog
|--/[postId]
|-- page.js
|-- page.js
|--/components
|-- features.js
|-- hero.js
|-- navbar.js
|-- layout.js
|-- page.js
Next, proceed with the following configuration steps:
1. Localizing messages
Depending on your workflow preference, you can store messages locally or fetch them from a remote source, such as a translation management system.
At the root of your project, create a messages folder where you can create JSON files for each locale, such as messages/en.json:
{
"Home":{
"Hero":{
"Title":"Next.js Internalization Demo",
"Subtitle":"This demo uses Next.js and the next-intl package to create a multi-language website. We later also explore how it works with Hygraph.",
"CallToAction":"Read about us"
}
}
}
This file is organized with keys referencing each value, which simplifies locating, updating, and collaborating on content. For instance, all content related to the Home page is grouped under the Home object. Within this object, further categorization can be done for different sections, such as the Hero section and the Features section.
Also, create a messages/fr.json for the French version:
{
"Home":{
"Hero":{
"Title":"Démonstration de l'internationalisation avec Next.js",
"Subtitle":"Cette démo utilise Next.js et le package next-intl pour créer un site web multilingue. Nous explorons également son fonctionnement avec Hygraph.",
"CallToAction":"Lisez à propos de nous"
}
}
}
Always ensure the keys are the same across all files, as that is what will be used to render the text.
2. Configuring Next.js
Set up a plugin to alias your i18n configuration to Server Components by updating your next.config.mjs if you're utilizing ECMAScript modules:
importcreateNextIntlPluginfrom'next-intl/plugin';
const withNextIntl =createNextIntlPlugin();
/** @type {import('next').NextConfig} */
const nextConfig ={};
exportdefaultwithNextIntl(nextConfig);
3. Defining locale-specific configurations
next-intl allows for a per-request configuration setup. In src/i18n.js, specify messages and other options based on the user's locale:
For this project, only English and French will be used. You can add more locales.
Having set up next-intl in your Next.js project, activating internationalization involves using the t() method, a function provided by next-intl for fetching translated strings. This method is accessed through the useTranslations hook, which you can import directly from the next-intl library.
This approach utilizes a key to retrieve the corresponding value. For example, navigating to http://localhost:3000/en displays the English version of the Hero section, while http://localhost:3000/fr shows its French counterpart.
Interpolation is a technique for inserting dynamic values into predefined text. It's beneficial for creating adaptable messages that may vary based on user input or other variables. A common use case is greeting users by name:
"message":"Hello {name}!"
By replacing {name} with a dynamic value, the message becomes personalized:
t('message',{name:'Jane'});
Resulting in:
"Hello Jane!"
Cardinal pluralization
This addresses the need to format messages differently based on numerical values, especially to distinguish between singular and plural forms. A classic example involves indicating the number of followers:
"message":"You have {count, plural, =0 {no followers yet} =1 {one follower} other {# followers}}."
This setup allows for different messages based on the value of count. For instance:
If count is 0, the message is: "You have no followers yet."
If count is 1, the message is: "You have one follower."
For any other number, say 3580, the message is: "You have 3,580 followers."
The # symbol is used to represent the actual number, formatted appropriately.
Ordinal pluralization
Ordinal pluralization is similar to cardinal pluralization but is used for ordering rather than quantity. It helps in formatting messages that relate to ranks or positions.
"message":"It's your {year, selectordinal, one {#st} two {#nd} few {#rd} other {#th}} birthday!"
This message would allow for a correct ordinal suffix to be applied based on the year value:
1st, 2nd, 3rd (special cases for one, two, and few in English)
4th, 5th, ... 21st, 22nd, ... (using other for all other numbers)
next-intl offers a comprehensive solution to the complex challenge of internationalizing date and time formats, accommodating the diverse preferences found across global locales. Since date formats can vary widely from region to region, adopting a flexible approach to date and time representation in international applications is crucial.
The next-intl library leverages the ICU (International Components for Unicode) syntax to simplify incorporating dates and times within localization files. This syntax allows for directly embedding dynamic date formats into your messages, utilizing placeholders for dates, thus streamlining the internationalization process.
Here's an example in an English localization file (en.json), demonstrating the use of a placeholder for the current date in a short format:
// en.json
{
"todayDate":"Today's date is {currentDate, date, short}."
}
next-intl supports predefined date formats such as short, full, long, and medium. It also allows defining custom date formats using “date skeletons". For instance, to display a date in a specific custom format, you could specify it in your localization file like so:
// en.json
{
"todayDate":"Today's date is {currentDate, date, ::yyyyMd}."
}
The :: prefix signifies the use of a custom skeleton format, granting developers precise control over how dates are presented. The next-intl documentation offers a detailed guide on the available formats and skeletons.
To integrate a date within a Next.js page or component, the t() function is utilized:
<p>{t('todayDate',{currentDate:newDate()})}</p>
By supplying the current date to this method, next-intl dynamically renders the date in the format appropriate to the user's locale. For example, an English locale might display as "Today's date is 2/25/24," whereas in a French locale, it would appear as "La date d'aujourd'hui est 25/02/24."
Furthermore, next-intl facilitates custom date formats within messages, allowing developers to define formatters based on DateTimeFormat options. These custom formatters can be named and utilized throughout your application:
<p>
{t(
'todayDate',
{currentDate:newDate()},
{
dateTime:{
short:{
day:'numeric',
month:'short',
year:'numeric',
},
},
}
)}
</p>
#Switching languages with App Router using next-intl
next-intl provides drop-in replacements for common Next.js navigation APIs that automatically handle the user locale behind the scenes. There are two strategies to achieving this, but the straightforward method is using shared pathnames.
With this strategy, the pathnames of your app are identical for all locales. This is the simplest case, because the routes you define in Next.js will map directly to the pathnames a user can request.
To create navigation APIs for this strategy, use the createSharedPathnamesNavigation function. Create a navigation.js in your src folder and add the following:
With this configuration, you gain access to routing components and methods like Link and usePathname, enabling intuitive navigation within your Next.js project.
Next, you can incorporate language switch functionality in your Navbar or any page you wish by attaching the pathname to the href property and a locale. For example, here is a navbar.js component:
Link and usePathname are imported from the naviagtion.js file in the above code. Also, you can handle switching between different languages by attaching the pathname to the href property and a locale.
For this guide, let’s use an existing project, aiming to localize it and integrate its content with a Next.js application. Begin by duplicating a simple blog project in the Hygraph marketplace. This action will replicate the schema and all its content, a process that may take a few moments. Once completed, the next step involves localizing the fields.
Navigate to the schema editor through the schema section. This interface allows adding, editing, or deleting fields and establishing model relationships. To localize a field, hover over it, select Edit field, check the Localize field option, and update. Repeat this process for all fields you wish to localize.
Subsequently, add the languages of your choice by accessing Project Settings > Locales.
With languages configured, proceed to Content to update existing content with the localized versions. Enable the localization fields by clicking the eye icon next to the locale.
After publishing the posts, you are ready to consume them into your Next.js application.
#Integrating localized content into Next.js with GraphQL
In Next.js, you can query GraphQL content with the @apollo/client library. Install the library by running the following command in your project directory:
npm i @apollo/client
For this Next.js project, you configured internationalization routing with the next-intl library. Alternatively, you can configure internationalization without the next-intl library since Next.js has inbuilt internalization routing configurations.
With the internalization routing already set up, you have access to the locales parameter, which would be used to query the content.
Once your queries are working, you can use them in the Next.js project. Before you make the request, retrieve the high performance c**ontent API, which gives you access to the Hygraph content. You can get this from the Project settings > Endpoints** page.
Next, implement this in the Blog page of the sample application (blog/page.js). Here is an example where the list of all posts from the Hygraph project is fetched into Next.js:
In the code above, the getPosts function is defined to fetch posts from Hygraph for a specific locale. This function utilizes the ApolloClient from @apollo/client, configured with Hygraph's API endpoint and an in-memory cache for efficient data management. The GraphQL query within this function requests posts for the specified locale, retrieving their id, title, slug, and excerpt.
The query is dynamically constructed to include the locale parameter, allowing for retrieving localized content based on the user's language preference. This is crucial for delivering a localized user experience, as content is fetched and displayed according to the user's selected language.
Fetching dynamic posts
Similarly, dynamic posts can be fetched and displayed on individual blog pages (blog/[slug]/page.js) using a comparable approach:
This guide has walked you through leveraging the next-intl library and Hygraph with Next.js for effective internationalization and localization of a web application.
Following these steps ensures your application reaches a wider audience and provides a more inclusive and user-friendly experience across diverse languages and cultures.
Blog Author
Joel Olawanle
Joel Olawanle is a Frontend Engineer and Technical writer based in Nigeria who is interested in making the web accessible to everyone by always looking for ways to give back to the tech community. He has a love for community building and open source.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.