How do I set up a new Next.js project to work with Hygraph?
To set up a new Next.js project with Hygraph, initialize a Next.js 14 app using npx create-next-app my-next-project. During setup, select: TypeScript (No), ESLint (Yes), Tailwind CSS (Yes), src/ directory (No), App Router (Yes), Import alias (No). After installation, open your project in a code editor and adjust app/globals.css to keep only Tailwind imports. Install dependencies with npm install and start the app using npm run dev. Your site will be available at http://localhost:3000/. For full details, see the Next.js Implementation Guide.
How do I configure Hygraph assets to work with Next.js image optimization?
To use Hygraph assets with Next.js image optimization, add Hygraph's asset domain (**.graphassets.com) to the images.remotePatterns array in your next.config.js file. This enables Next.js to safely serve images from Hygraph. For example:
How do I fetch data from Hygraph in my Next.js app?
Clone the Hygraph demo project to get a sample content model. Configure Content API access permissions in your Hygraph project by navigating to Project settings > Access > API Access > Content API and initializing defaults. Copy the High Performance Read-only Content API endpoint and add it to your Next.js project's .env file. Use GraphQL queries in your Next.js code to fetch content. For example, use the pages query to retrieve a list of pages and render them in your app. See the guide for step-by-step instructions.
How do I create dynamic page routes in Next.js using Hygraph content?
Create a directory app/pages/[slug] and a page.js file inside it. Use dynamic routing to fetch content for each slug from Hygraph using a GraphQL query. Render the page title and body text based on the fetched data. This allows you to generate a new page for every content entry in Hygraph. For code examples and details, see the documentation.
Features & Capabilities
What is Hygraph and how does it work with Next.js?
Hygraph is a headless CMS with a GraphQL-native architecture, designed for content federation and scalability. When integrated with Next.js, Hygraph enables developers to fetch and render structured content using GraphQL queries, supporting dynamic routing, image optimization, and rapid content delivery. This combination allows for modern, scalable web applications with flexible content management. Learn more at Hygraph Product Page.
What integrations does Hygraph support?
Hygraph supports a wide range of integrations, including Netlify and Vercel for hosting, BigCommerce, commercetools, and Shopify for eCommerce, Lokalise and Crowdin for localization, Aprimo and Cloudinary for digital asset management, Ninetailed for personalization, and AltText.ai for AI-powered features. For a full list, visit the Hygraph Integrations page.
Does Hygraph provide an API for content management?
Yes, Hygraph offers a powerful GraphQL API for efficient content fetching and management. This API enables developers to query and mutate content, making it easy to integrate Hygraph with modern frameworks like Next.js. For more details, see the API Reference.
Where can I find technical documentation and implementation guides for Hygraph?
Comprehensive technical documentation, including implementation guides for Next.js and other frameworks, is available at Hygraph Documentation. You can also find specific guides for different frameworks in the Implementations section.
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 details, visit the Hygraph Security Features page.
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 and feature breakdowns, visit the Hygraph Pricing page.
Use Cases & Customer Success
Who can benefit from using Hygraph with Next.js?
Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, and technology partners. Companies seeking to modernize their tech stack, scale digital experiences, or improve development velocity can benefit from Hygraph's integration with Next.js. Industries represented in Hygraph's case studies include food & beverage, consumer electronics, automotive, healthcare, travel, media, eCommerce, SaaS, marketplaces, edtech, and wellness. See case studies for examples.
Can you share specific customer success stories using Hygraph?
Yes. Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, and Samsung improved customer engagement with scalable content delivery. Dr. Oetker enhanced their digital experience using MACH architecture. For more, see customer stories.
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. These benefits help businesses modernize their tech stack and achieve measurable results. Learn more at Hygraph Product Page.
Support & Onboarding
What support and training does Hygraph offer for new users?
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. Customer Success Managers are available to assist during onboarding. For more, visit the Hygraph Contact Page.
How easy is it to get started with Hygraph?
Hygraph is designed for ease of use, with an intuitive interface praised by customers. Non-technical users can start quickly by signing up for a free account and following onboarding guides. For example, Top Villas launched a new project in just 2 months. Resources include documentation, tutorials, and onboarding support. See Hygraph Documentation for details.
Pain Points & Solutions
What common pain points does Hygraph solve for teams using Next.js?
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). Solutions include an intuitive interface, GraphQL-native architecture, content federation, and scalability. See product page for more.
How does Hygraph differentiate itself in solving these pain points?
Hygraph stands out by empowering non-technical users, modernizing legacy systems with API-first architecture, ensuring consistent branding for global teams, and streamlining workflows to reduce costs and accelerate speed-to-market. Its GraphQL-native platform simplifies development, adapts to evolving schemas, and resolves cache and integration challenges. For more, visit the product page.
Performance & Metrics
What performance benefits does Hygraph offer?
Hygraph is optimized for rapid content delivery, which improves user experience, engagement, and search engine rankings. Fast content distribution reduces bounce rates and increases conversions. For more details, see this 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, time to market, maintenance costs, scalability metrics, and performance during peak usage. For more, see the CMS KPIs blog.
Customer Proof & Case Studies
Who are some of Hygraph's customers?
Hygraph is trusted by leading brands such as Sennheiser, HolidayCheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. For more details and logos, visit Hygraph Case Studies.
Start by initializing a new Next.js 14 project. Open up your terminal, navigate to where you want your project, and run the following command:
npx create-next-app my-next-project
The interactive setup will ask you questions to configure your project. Initialize with the following answers:
Typescript: No
ESLint: Yes
Tailwind CSS: Yes
src/ directory: No
App Router: Yes
Import alias: No
After choosing the options, the CLI will install all the necessary pieces to run your Next.js site.
Once the installation completes, open the new Next project in a code editor of your choice.
You need to adjust the default Tailwind styling that Next.js gives us from the installation. To do this, remove the global CSS rules in app/globals.css except the following Tailwind imports:
@tailwind base;
@tailwind components;
@tailwind utilities;
Change directory to your new Next project run npm install to install dependencies:
cd my-next-project && npm install
Run the command npm run dev to initialize the app. Your site will be available in the browser at http://localhost:3000/.
After cloning, you will have a simple project that contains one content model called Page that contains fields for Title, Slug, and Body; and one content entry.
If you navigate to the Schema builder and click on the Page model, you will see this:
Demo project - Page model
And if you navigate to the Content editor and view the sample entry details, you'll see this:
Before you can connect Next to Hygraph, you will need to configure Content API access permissions for unauthenticated requests.
To do this, we'll to go Project settings > Access > API Access > Content API in our Hygraph project, scroll to find the Manage Content API access permissions box and click Initialize defaults:
Content API permissions
Finally, we will copy the High Performance Read-only Content API endpoint from Project settings > Access > API Access > Endpoints. You will use it to connect Next to Hygraph later on.
Next, you should test if you can fetch the information in the sample content entry that we showed you earlier. To do this, navigate to the API Playground in your project and use the following query:
Query
Response
If you execute the query, the response should fetch the sample query in the demo project you cloned.
Want to see Next and Hygraph in action? Watch a quick video on how to connect Next and Hygraph:
In the above code, we have created the function getPages() that queries and fetches all pages from Hygraph. The Home function calls the getPages function and waits for the query to return with our content from Hygraph. Then, we use our content to render a list of links to other pages and added a button that will bring you back to this guide.
Now, that we have a list of pages in our homepage, we need to create a dynamic route for each page. To do this, create a new directory in the app directory called pages/[slug] and a file called page.js inside the new directory. Once created add following code:
In the above code, we are taking advantage of the dynamic routing capabilities of the Next app router to create a page route,http://localhost:3000/page/{page.slug}, that makes new page for every slug. The Page() function calls the getPage function and waits for the query to return with our content from Hygraph. Then, we use our content to render the page title and body text, and added a button that will bring you back to the homepage.
Dynamic page
Congratulations! You have a homepage and a dynamic page route to render all pages and their content.
Pro Tip
This was a simple and quick example of how to fetch and render content from Hygraph using Next.