What are the key features of Hygraph for building content-driven applications?
Hygraph offers a GraphQL-native Headless CMS, content federation (integrating multiple data sources without duplication), enterprise-grade security and compliance, user-friendly tools for non-technical users, high-performance endpoints, and a wide range of integrations. These features enable developers and content teams to build scalable, flexible, and modern digital experiences. Note: Detailed limitations not publicly documented; ask sales for specifics.
Does Hygraph support building dynamic artist pages and landing pages with Next.js?
Yes, Hygraph can be used with Next.js to build dynamic artist pages, landing pages, and homepages. The platform supports federated content, allowing you to combine data from Hygraph and remote sources like LastFM. You can use GraphQL queries to fetch artist data, images, bios, tags, and similar artists, and render them in Next.js components. Note: Implementation requires familiarity with Next.js and GraphQL.
What integrations are available with Hygraph?
Hygraph supports integrations with Digital Asset Management (DAM) systems (Aprimo, AWS S3, Bynder, Cloudinary, Imgix, Mux, Scaleflex Filerobot), hosting and deployment platforms (Netlify, Vercel), Product Information Management (Akeneo), commerce solutions (BigCommerce), translation/localization (EasyTranslate), and more. For a full list, visit the Hygraph Marketplace. Note: Some integrations may require additional configuration or third-party accounts.
What APIs does Hygraph provide for developers?
Hygraph provides several APIs: the GraphQL Content API for querying and manipulating content, the Management API for handling project structure (accessible via the Management SDK), the Asset Upload API for uploading files, and the MCP Server API for secure communication between AI assistants and Hygraph. For details, see the API Reference documentation. Note: API usage may require appropriate permissions and setup.
Implementation & Technical Requirements
How do I connect Hygraph to my Next.js project?
To connect Hygraph to a Next.js project, set up your project with npx create-next-app, then obtain your Hygraph Content API endpoint from your project settings. Add this endpoint to your .env.local file as HYGRAPH_ENDPOINT. You can then use fetch or a GraphQL client to query data from Hygraph in your Next.js components. Note: You must configure API permissions in Hygraph to allow public or authenticated access as needed.
How long does it take to implement Hygraph for a new project?
Implementation time varies by project complexity. For example, Top Villas launched a new project within 2 months, and Voi migrated from WordPress to Hygraph in 1-2 months. Hygraph provides onboarding guides, starter projects, and community support to accelerate setup. Note: Complex migrations or integrations may require additional time and planning.
What technical documentation is available for Hygraph?
Hygraph offers extensive documentation, including API references, schema guides, onboarding tutorials, integration guides (e.g., for Mux, Akeneo, Auth0), and AI feature docs. Access these resources at hygraph.com/docs. Note: Documentation for Hygraph Classic is also available for legacy users.
Use Cases & Benefits
What types of projects or teams benefit most from using Hygraph?
Hygraph is ideal for developers, content creators, product managers, and marketing professionals in enterprises and high-growth companies. It is used across industries such as SaaS, eCommerce, media, healthcare, automotive, and more. Teams needing scalable content management, localization, and integration with modern tech stacks benefit most. Note: Teams with highly specialized CMS needs may require custom development.
What business impact can I expect from using Hygraph?
Customers have reported faster time-to-market (e.g., Komax achieved 3X faster launches), improved customer engagement (Samsung saw a 15% increase), and reduced operational costs. Hygraph's content federation and API-first approach support consistent content delivery and scalability. Note: Actual results depend on project scope and implementation.
What problems does Hygraph solve for content teams and developers?
Hygraph addresses developer dependency for content updates, modernizes legacy tech stacks, ensures content consistency across regions, streamlines workflows, reduces operational costs, accelerates speed-to-market, and simplifies schema evolution. It also helps with integration challenges and performance bottlenecks. Note: Some highly specialized workflows may require additional customization.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant (since August 3, 2022), ISO 27001 certified, and GDPR compliant. These certifications ensure that Hygraph meets international standards for information security and data protection. Note: For more details, visit Hygraph's Secure Features page.
What security features are available in Hygraph?
Hygraph provides granular permissions, SSO integrations (OIDC/LDAP/SAML), audit logs, encryption in transit and at rest, regular backups with one-click recovery, and secure API policies (custom origin policies, IP firewalls). All endpoints have SSL certificates. Note: Some advanced security features may be available only on certain plans.
Performance & Reliability
How does Hygraph ensure high performance for content delivery?
Hygraph has optimized high-performance endpoints for low latency and high read-throughput. A read-only cache endpoint provides 3-5x latency improvement. The platform actively measures GraphQL API performance and offers practical optimization advice. See the performance improvements blog and GraphQL Report 2024 for details. Note: Actual performance may vary based on usage and configuration.
Customer Experience & Support
What feedback have customers given about Hygraph's ease of use?
Customers have praised Hygraph for its intuitive interface, quick adaptability, and accessibility for non-technical users. Feedback highlights include instant content updates, clear setup, and granular roles/permissions that streamline workflows. For example, Sigurður G. (CTO) noted the UI is intuitive for normal users, and Charissa K. (Senior CMS Specialist) described it as fast to comprehend and localize. Note: Some users may require onboarding to fully utilize advanced features.
What support and onboarding resources does Hygraph provide?
Hygraph offers structured onboarding (introduction calls, account provisioning, technical kickoffs), extensive documentation, starter projects, webinars, live streams, and a Slack community. These resources help both developers and non-technical users get started quickly. Note: Some resources may require registration or access to specific plans.
Industry Coverage & Customer Proof
Which industries are represented in Hygraph's case studies?
Hygraph's case studies cover SaaS, marketplaces, education technology, media and publication, healthcare, consumer goods, automotive, technology, fintech, travel and hospitality, food and beverage, eCommerce, agencies, online gaming, events & conferences, government, consumer electronics, engineering, and construction. See case studies for details. Note: Some industries may have more extensive documentation than others.
Can you share specific customer success stories using Hygraph?
Yes. Samsung improved customer engagement by 15% with Hygraph. Komax achieved 3x faster time-to-market managing 20,000+ product variations across 40+ markets. AutoWeb saw a 20% increase in website monetization. Voi scaled multilingual content across 12 countries and 10 languages. See more at Hygraph's case studies page. Note: Results vary by implementation.
Limitations & Trade-Offs
What are the limitations or scenarios where Hygraph may not be the best fit?
Hygraph is best suited for teams seeking a GraphQL-native, API-first CMS with content federation and modern integration needs. Teams requiring highly specialized or legacy CMS workflows may need custom development or alternative solutions. Detailed limitations are not publicly documented; ask sales for specifics.
In the first part of this series, we created an artist content model and components as well as connected LastFM as a remote source to get our music platform project, Hygraph FM. Now that these elements are in place, it’s time to put our content model into action!
In this article, we will build a frontend using Next.js 13 and federated content from Hygraph. To do this, we’ll create the artist summary pages to render the artist bio, genre tags, and similar artists. Additionally, we will create a home page that showcases featured artists, a landing page that lists all artists on Hygraph FM, and render our promotional block components.
To start, we need to initialize a new Next.js 13 project. Open up your terminal and navigate to where you want your project, then run the following command:
npx create-next-app hygraphfm
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
Once the options are chosen, 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. We need to adjust the default Tailwind styling that Next.js gives us from the installation.
Update the global CSS rules in app/globals.css to add the following extra styling but leave the file with the following Tailwind imports:
@tailwind base;
@tailwind components;
@tailwind utilities;
Additional Styling:
/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
:root{
--foreground-rgb: 29, 33, 39;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media(prefers-color-scheme: dark){
:root{
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 29, 33, 39;
--background-end-rgb: 29, 33, 39;
}
}
body{
color:rgb(var(--foreground-rgb));
background:linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
/* Add the following styling */
.background-radial-gradient{
background-color:hsl(218, 41%, 15%);
background-image:radial-gradient(650px circle at 0% 0%,
hsl(218, 41%, 35%) 15%,
hsl(218, 41%, 30%) 35%,
hsl(218, 41%, 20%) 75%,
hsl(218, 41%, 19%) 80%,
transparent 100%),
radial-gradient(1250px circle at 100% 100%,
hsl(218, 41%, 45%) 15%,
hsl(218, 41%, 30%) 35%,
hsl(218, 41%, 20%) 75%,
hsl(218, 41%, 19%) 80%,
transparent 100%);
}
.all-links > a{
text-decoration: underline;
}
.fm-mode{
mix-blend-mode: color-dodge
}
After adding a few global styles, we need to connect Hygraph to our Next project so that we can use the data from our artist content model.
To make Hygraph accessible to our Next.js project, we need to allow read permissions on the Content API. Head over to your project’s settings and click on API Access. To start, let’s set the public content API to its default. This will give us access to all the content in our models, including the remote data from LastFM to read into our Next project. From this same screen, copy the Content API endpoint URL.
Create a new file in the root of your project named .env.local and add the variable HYGRAPH_ENDPOINT.
This will be where we paste the endpoint URL we copied from Hygraph:
//.env.local
HYGRAPH_ENDPOINT=YOUR-URL-HERE
Now we can start our Next site and build our frontend. In the terminal, type the following command to run the project locally in a browser of your choice:
First, let’s build our header, navbar, and footer. In your app directory, create a new folder called components . In the components folders, create three files: Header.js, Footer.js, Navbar.js and add the following code respectively:
<pclassName="text-lg text-[hsl(218,81%,95%)]">Hygraph FM is a community of artists, producers, listeners who are passionate about music and the creative process!
</p>
</div>
</div>
</div>
</div>
</header>
)
}
Navbar
// Navbar component: app/components/Navbar.js
'use client';
importHeadfrom'next/head';
importLinkfrom'next/link';
import{ useState }from'react';
exportdefaultfunctionNavbar(){
const[navbar, setNavbar]=useState(false);
return(
<navaria-label="Hygraph FM Menu"role="navigation"className="w-full bg-gray-800 shadow">
Note: Since we are using state, the Navbar is no longer a server component like the Header and Footer. It is now part of the client bundle. As a result, we need to add the ‘use client’; directive at the top of the file to denote this change.
Now that we have these components in place, we are ready to create our homepage with featured artists.
Querying recent artists for featured artist content
On our homepage, we want to provide a curated selection of artists for our users. To achieve this, we can create a section showcasing featured or recently added artists on our platform.
To implement this feature, we can send a query to Hygraph using the last operator, which allows us to retrieve the latest additions to our platform. By requesting the last six artists added, we can display them in a dedicated, appealing content section on our homepage.
# GraphQL query to get the 6 most recent artists from Hygraph
queryArtists{
artists(last:6){
slug
artist
id
artistImage{
altText
url
height
width
}
}
}
In the app directory, go to the file called page.js , delete everything and paste in the following code:
The above code makes a request to Hygraph gives us the name, slug, and image information for the last 6 artists from our artist content. This data is then rendered in a function that creates the Homepage.
Featured artist content will not only enhance the user experience by providing them with a selection of artists they may be interested in, but it will also help promote new artists and encourage users to explore the platform.
Great job! We now have a functional homepage for the Hygraph FM site, complete with featured artists that link to their individual bio pages. However, these links currently return a 404 error because the pages have not been created yet. Let's create them now!
To create individual pages for each artist on our platform, we need to establish a dynamic route to generate a unique page for every artist based on their slug. This allows us to provide content for each artist on our platform.
We will add a new directory called artist/[slug] in the app directory. Next, add a page.jsx file in your new artist/[slug] directory, which will serve as the template for each individual artist page. We will use this template to dynamically generate unique content for each artist based on their slug.
By creating a dynamic route for each artist, we can provide a more personalized experience for users on our platform. This will help to increase engagement and improve overall user satisfaction.
app/
┣ artist/
┃ ┗ [slug]/
┃ ┗ page.jsx
The structure of your project should match the file tree above. The [slug] new directory allows us to use our page.jsx as a file template to make a page for every artist. In the artist/[slug]/page.jsx file, add the following code:
Let’s breakdown this code down a bit. At the top of the file, we have an async function to fetch an artist by slug. The getArtist function fetches the artist data from Hygraph using the provided slug. Our content and remote data from LastFM is federated into a single API call that allows us to generate metadata for each artist dynamically. The Artist function is the template for each individual artist page and uses the getArtist function to retrieve and render the artist data. The page displays the artist's name, image, biosummary, similar artists, and tags.
To create a landing page that shows all artists on the platform, we need to create a new directory route in our app directory called artists . Create a new file called page.jsx inside the artists directory. Notice a pattern? In Next.js 13, page.jsx acts as file templates and the directory denotes what the route should be called when using the app router. In our case, this will contain the code to display all artists on the platform in a grid format.
/* File tree with artist
landing page template */
app/
┣ artist/
┃ ┗ [slug]/
┃ ┗ page.jsx
┣ artists/
┃ ┗ page.jsx
Add the following code in the artists/page.jsx file:
// Landing page for all artists: app/artists/page.jsx
In the above code, we create an async function called getAllArtists(). This function contains a GraphQL query that fetches all of the artists from Hygraph. The response will be returned as a JSON object, which we can loop through and display in our grid.
Once we have fetched all of the artists, we can then render them in our grid using the map() function. This function allows us to loop through each artist and display their information in a card-like format.
Our HygraphFM project now has a homepage and landing page for artists, and we created individual artist pages that display a bio, image, tags, and similar artists using a dynamic route in the app directory. We are almost done with our Next build! The last thing we need is to create server components to render our promotional content to help fulfill our organization’s business goals. We will start with creating the Callout server component.
In part 1 of this series, we built Button, Callout, and CTA components in Hygraph. These components will help content editors, and marketers create content for promotional and engagement campaigns. We added these components as a collection or modular component to our Artist content model, enabling us to create frontend code to display these content areas.
Making a Callout component
To implement a Callout component, we need to create a file named Callout.js inside the components directory. This component will render a promotional message with a button to invite new users to join Hygraph FM.
The Callout component takes two props: button and title. The title prop is the main text of the message, while the button prop is an object with two properties: text and url.
The Callout is ready to use in our application to promote our content and increase user engagement.
Call to Action (CTA) component
To create the CTA component, we need to create a new file in the components directory called CallToAction.js.
Let’s break down the code a bit. The CTA component takes several props, including body, heading, button, and image. These are the same field types we used when we created the CTA component in Hygraph. The body prop will contain the body text of the CTA, while the heading prop will contain the main heading. The button prop will contain an object with two properties: text and url, which will be used to render a button with a link. The image prop will contain an object with properties such as url, altText, width, and height to render an image.
We can now import these components into a page template and render them on the homepage, individual artist pages, or wherever needed! For example, in the app/artist/[slug]/page.jsx file, we can modify the code to include the updated query fetching promotional blocks content.
Once we have retrieved our promotional blocks, we can use an if statement to check the type of each block and render either the Callout or CallToAction component accordingly.
Now that everything is in its right place, we can render all of our content, components, and remote source data on the artist page:
Our reusable promotional components allow us to incorporate business goals and create a scalable codebase that can be easily modified when new features are needed. Connecting a remote source allowed us to use artist metadata that will automatically update if there are any changes in the LastFM API. Moreover, by using remote source data, we avoid duplicating content that is maintained in another system. This helps us to reduce development time, increase flexibility, and maintain consistency across the content as well as our application.
For part 3 of this series, we will take our Hygraph FM project a step further and explore pagination to maintain user experience as our platform grows. In the meantime, try adding new callouts, CTAs, or new artists and see how the pages change.
Blog Author
Lo Etheridge
Senior Developer Relations
Lo is Hygraph's Senior Developer Relations Specialist. They focus on developer education around Headless CMS, JS-based frontends, and API technologies as well as the dynamic cross-functional relationship between developers and content professionals.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.
In the first part of this series, we created an artist content model and components as well as connected LastFM as a remote source to get our music platform project, Hygraph FM. Now that these elements are in place, it’s time to put our content model into action!
In this article, we will build a frontend using Next.js 13 and federated content from Hygraph. To do this, we’ll create the artist summary pages to render the artist bio, genre tags, and similar artists. Additionally, we will create a home page that showcases featured artists, a landing page that lists all artists on Hygraph FM, and render our promotional block components.
To start, we need to initialize a new Next.js 13 project. Open up your terminal and navigate to where you want your project, then run the following command:
npx create-next-app hygraphfm
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
Once the options are chosen, 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. We need to adjust the default Tailwind styling that Next.js gives us from the installation.
Update the global CSS rules in app/globals.css to add the following extra styling but leave the file with the following Tailwind imports:
@tailwind base;
@tailwind components;
@tailwind utilities;
Additional Styling:
/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
:root{
--foreground-rgb: 29, 33, 39;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media(prefers-color-scheme: dark){
:root{
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 29, 33, 39;
--background-end-rgb: 29, 33, 39;
}
}
body{
color:rgb(var(--foreground-rgb));
background:linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
/* Add the following styling */
.background-radial-gradient{
background-color:hsl(218, 41%, 15%);
background-image:radial-gradient(650px circle at 0% 0%,
hsl(218, 41%, 35%) 15%,
hsl(218, 41%, 30%) 35%,
hsl(218, 41%, 20%) 75%,
hsl(218, 41%, 19%) 80%,
transparent 100%),
radial-gradient(1250px circle at 100% 100%,
hsl(218, 41%, 45%) 15%,
hsl(218, 41%, 30%) 35%,
hsl(218, 41%, 20%) 75%,
hsl(218, 41%, 19%) 80%,
transparent 100%);
}
.all-links > a{
text-decoration: underline;
}
.fm-mode{
mix-blend-mode: color-dodge
}
After adding a few global styles, we need to connect Hygraph to our Next project so that we can use the data from our artist content model.
To make Hygraph accessible to our Next.js project, we need to allow read permissions on the Content API. Head over to your project’s settings and click on API Access. To start, let’s set the public content API to its default. This will give us access to all the content in our models, including the remote data from LastFM to read into our Next project. From this same screen, copy the Content API endpoint URL.
Create a new file in the root of your project named .env.local and add the variable HYGRAPH_ENDPOINT.
This will be where we paste the endpoint URL we copied from Hygraph:
//.env.local
HYGRAPH_ENDPOINT=YOUR-URL-HERE
Now we can start our Next site and build our frontend. In the terminal, type the following command to run the project locally in a browser of your choice:
First, let’s build our header, navbar, and footer. In your app directory, create a new folder called components . In the components folders, create three files: Header.js, Footer.js, Navbar.js and add the following code respectively:
<pclassName="text-lg text-[hsl(218,81%,95%)]">Hygraph FM is a community of artists, producers, listeners who are passionate about music and the creative process!
</p>
</div>
</div>
</div>
</div>
</header>
)
}
Navbar
// Navbar component: app/components/Navbar.js
'use client';
importHeadfrom'next/head';
importLinkfrom'next/link';
import{ useState }from'react';
exportdefaultfunctionNavbar(){
const[navbar, setNavbar]=useState(false);
return(
<navaria-label="Hygraph FM Menu"role="navigation"className="w-full bg-gray-800 shadow">
Note: Since we are using state, the Navbar is no longer a server component like the Header and Footer. It is now part of the client bundle. As a result, we need to add the ‘use client’; directive at the top of the file to denote this change.
Now that we have these components in place, we are ready to create our homepage with featured artists.
Querying recent artists for featured artist content
On our homepage, we want to provide a curated selection of artists for our users. To achieve this, we can create a section showcasing featured or recently added artists on our platform.
To implement this feature, we can send a query to Hygraph using the last operator, which allows us to retrieve the latest additions to our platform. By requesting the last six artists added, we can display them in a dedicated, appealing content section on our homepage.
# GraphQL query to get the 6 most recent artists from Hygraph
queryArtists{
artists(last:6){
slug
artist
id
artistImage{
altText
url
height
width
}
}
}
In the app directory, go to the file called page.js , delete everything and paste in the following code:
The above code makes a request to Hygraph gives us the name, slug, and image information for the last 6 artists from our artist content. This data is then rendered in a function that creates the Homepage.
Featured artist content will not only enhance the user experience by providing them with a selection of artists they may be interested in, but it will also help promote new artists and encourage users to explore the platform.
Great job! We now have a functional homepage for the Hygraph FM site, complete with featured artists that link to their individual bio pages. However, these links currently return a 404 error because the pages have not been created yet. Let's create them now!
To create individual pages for each artist on our platform, we need to establish a dynamic route to generate a unique page for every artist based on their slug. This allows us to provide content for each artist on our platform.
We will add a new directory called artist/[slug] in the app directory. Next, add a page.jsx file in your new artist/[slug] directory, which will serve as the template for each individual artist page. We will use this template to dynamically generate unique content for each artist based on their slug.
By creating a dynamic route for each artist, we can provide a more personalized experience for users on our platform. This will help to increase engagement and improve overall user satisfaction.
app/
┣ artist/
┃ ┗ [slug]/
┃ ┗ page.jsx
The structure of your project should match the file tree above. The [slug] new directory allows us to use our page.jsx as a file template to make a page for every artist. In the artist/[slug]/page.jsx file, add the following code:
Let’s breakdown this code down a bit. At the top of the file, we have an async function to fetch an artist by slug. The getArtist function fetches the artist data from Hygraph using the provided slug. Our content and remote data from LastFM is federated into a single API call that allows us to generate metadata for each artist dynamically. The Artist function is the template for each individual artist page and uses the getArtist function to retrieve and render the artist data. The page displays the artist's name, image, biosummary, similar artists, and tags.
To create a landing page that shows all artists on the platform, we need to create a new directory route in our app directory called artists . Create a new file called page.jsx inside the artists directory. Notice a pattern? In Next.js 13, page.jsx acts as file templates and the directory denotes what the route should be called when using the app router. In our case, this will contain the code to display all artists on the platform in a grid format.
/* File tree with artist
landing page template */
app/
┣ artist/
┃ ┗ [slug]/
┃ ┗ page.jsx
┣ artists/
┃ ┗ page.jsx
Add the following code in the artists/page.jsx file:
// Landing page for all artists: app/artists/page.jsx
In the above code, we create an async function called getAllArtists(). This function contains a GraphQL query that fetches all of the artists from Hygraph. The response will be returned as a JSON object, which we can loop through and display in our grid.
Once we have fetched all of the artists, we can then render them in our grid using the map() function. This function allows us to loop through each artist and display their information in a card-like format.
Our HygraphFM project now has a homepage and landing page for artists, and we created individual artist pages that display a bio, image, tags, and similar artists using a dynamic route in the app directory. We are almost done with our Next build! The last thing we need is to create server components to render our promotional content to help fulfill our organization’s business goals. We will start with creating the Callout server component.
In part 1 of this series, we built Button, Callout, and CTA components in Hygraph. These components will help content editors, and marketers create content for promotional and engagement campaigns. We added these components as a collection or modular component to our Artist content model, enabling us to create frontend code to display these content areas.
Making a Callout component
To implement a Callout component, we need to create a file named Callout.js inside the components directory. This component will render a promotional message with a button to invite new users to join Hygraph FM.
The Callout component takes two props: button and title. The title prop is the main text of the message, while the button prop is an object with two properties: text and url.
The Callout is ready to use in our application to promote our content and increase user engagement.
Call to Action (CTA) component
To create the CTA component, we need to create a new file in the components directory called CallToAction.js.
Let’s break down the code a bit. The CTA component takes several props, including body, heading, button, and image. These are the same field types we used when we created the CTA component in Hygraph. The body prop will contain the body text of the CTA, while the heading prop will contain the main heading. The button prop will contain an object with two properties: text and url, which will be used to render a button with a link. The image prop will contain an object with properties such as url, altText, width, and height to render an image.
We can now import these components into a page template and render them on the homepage, individual artist pages, or wherever needed! For example, in the app/artist/[slug]/page.jsx file, we can modify the code to include the updated query fetching promotional blocks content.
Once we have retrieved our promotional blocks, we can use an if statement to check the type of each block and render either the Callout or CallToAction component accordingly.
Now that everything is in its right place, we can render all of our content, components, and remote source data on the artist page:
Our reusable promotional components allow us to incorporate business goals and create a scalable codebase that can be easily modified when new features are needed. Connecting a remote source allowed us to use artist metadata that will automatically update if there are any changes in the LastFM API. Moreover, by using remote source data, we avoid duplicating content that is maintained in another system. This helps us to reduce development time, increase flexibility, and maintain consistency across the content as well as our application.
For part 3 of this series, we will take our Hygraph FM project a step further and explore pagination to maintain user experience as our platform grows. In the meantime, try adding new callouts, CTAs, or new artists and see how the pages change.
Blog Author
Lo Etheridge
Senior Developer Relations
Lo is Hygraph's Senior Developer Relations Specialist. They focus on developer education around Headless CMS, JS-based frontends, and API technologies as well as the dynamic cross-functional relationship between developers and content professionals.
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.