How do I create a learning platform using Next.js 13 and Hygraph?

To create a learning platform using Next.js 13 and Hygraph, start by setting up a content model in Hygraph (see this guide: https://hygraph.com/blog/building-learning-platform-schema). Initialize a new Next.js 13 project with npx create-next-app learning-platform, configure it with the App Router, and connect it to your Hygraph project by setting the HYGRAPH_ENDPOINT in your .env.local file. Fetch course data from Hygraph using GraphQL queries and render it in your Next.js frontend. For a step-by-step tutorial, visit the official blog post: https://hygraph.com/blog/creating-learning-platform-nextjs-13-app-router#dynamic-routes-in-nextjs-13s-app-directory.

What are the requirements for building a learning platform with Next.js 13 and Hygraph?

The requirements include: Next.js 13 with the App Router, a basic understanding of React and Next.js, access to a Hygraph project schema (which can be cloned from https://app.hygraph.com/clone/fb3992dcf3bd4d909a942a48c2786705?name=Learning%20Platform), and permissions set on the Hygraph Content API. For more details, see the blog post: https://hygraph.com/blog/creating-learning-platform-nextjs-13-app-router#dynamic-routes-in-nextjs-13s-app-directory.

What is the significance of the Next.js 13 App Router in this project?

The Next.js 13 App Router provides flexibility to extend projects using React Server Components, making it easier to handle authentication, interactivity, and dynamic routing for complex learning platforms. Source: https://hygraph.com/blog/creating-learning-platform-nextjs-13-app-router?utm_source=pocket_shared

What are the next steps after creating a learning platform with Hygraph and Next.js?

After building the initial platform, you can add more content in Hygraph, update frontend styling, and implement features like lesson locking and authentication to control access. For further guidance, refer to the blog post: https://hygraph.com/blog/creating-learning-platform-nextjs-13-app-router#dynamic-routes-in-nextjs-13s-app-directory.

What features does Hygraph offer for developers building with Next.js?

Hygraph provides a GraphQL-native API, content federation, and scalability, making it easy to fetch and manage structured content for Next.js applications. It supports dynamic routing, relational data modeling, and rich text rendering with React components. For more, see https://hygraph.com/features.

Does Hygraph provide an API for content management?

Yes, Hygraph offers a powerful GraphQL API for efficient content fetching and management. Learn more at the Hygraph API Reference: https://hygraph.com/docs/api-reference.

What integrations are available with Hygraph?

Hygraph integrates with platforms such as Netlify, Vercel, Shopify, BigCommerce, commercetools, Lokalise, Crowdin, EasyTranslate, Smartling, Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot, Ninetailed, AltText.ai, Adminix, and Plasmic. For a full list, visit https://hygraph.com/docs/integrations.

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation is available at https://hygraph.com/docs, covering setup, API usage, integrations, and best practices.

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 detailed pricing and feature breakdowns, visit the Hygraph pricing page: https://hygraph.com/pricing.

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more, see https://hygraph.com/features/secure.

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It's especially valuable for modern software companies, enterprises modernizing their tech stack, and brands scaling across geographies or re-platforming from traditional solutions. Source: ICPVersion2_Hailey.pdf.

What business impact can customers expect from using Hygraph?

Customers can expect time savings, faster speed-to-market, improved operational efficiency, and enhanced customer experiences through consistent and scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency. Source: ICPVersion2_Hailey.pdf.

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 https://hygraph.com/case-studies for details.

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, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. Explore more at https://hygraph.com/p/headless-cms.

What problems does Hygraph solve?

Hygraph addresses operational pains (reducing reliance on developers, modernizing legacy tech stacks, supporting global teams, improving content creation UX), financial pains (lowering operational costs, speeding time-to-market, reducing maintenance, supporting scalability), and technical pains (simplifying development, streamlining queries, resolving cache and integration issues). Source: https://hygraph.com/p/headless-cms.

How does Hygraph solve pain points for different personas?

For developers: reduces boilerplate code and streamlines queries. For content creators/project managers: provides an intuitive interface for independent content updates. For business stakeholders: lowers operational costs, supports scalability, and accelerates speed to market. Source: https://hygraph.com/p/headless-cms.

What KPIs and metrics are associated with the pain points Hygraph solves?

Key metrics include time saved on content updates, system uptime, consistency across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, and scalability metrics. For more, see Hygraph's blog on CMS KPIs: https://hygraph.com/blog/cms-kpi.

How does Hygraph optimize content delivery performance?

Hygraph ensures rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. This helps reduce bounce rates and increase conversions. For more, visit this page: https://hygraph.com/learn/headless-cms/headless-cms-checklist?utm_campaign=Default%20Email%20Campaign&utm_medium=email&utm_content=267490767&utm_source=hs_automation#choosing-a-headless-cms.

What feedback have customers given about Hygraph's ease of use?

Customers describe Hygraph as 'super easy to set up and use,' with an intuitive, logical interface that is accessible for both technical and non-technical users. Source: https://hygraph.com/try-headless-cms.

What support and training 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. For more, visit https://hygraph.com/contact.

How easy is it to get started with Hygraph?

It's easy to get started by signing up for a free-forever account at https://app.hygraph.com. Resources like documentation, tutorials, and onboarding guides are available to help new users. Source: https://hygraph.com/docs.

How long does it take to implement Hygraph?

Hygraph is designed for quick implementation. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. Source: https://hygraph.com/case-studies/top-villas-case-study#why-hygraph.

What is Hygraph's primary purpose and vision?

Hygraph's vision is to unify data and enable content federation, empowering businesses to create impactful digital experiences. Its mission is to remove traditional content management pain points through a GraphQL-native architecture. Source: https://hygraph.com/about-us.

Who are some of Hygraph's customers?

Notable customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See more at https://hygraph.com/case-studies.

Creating a learning platform with Next.js 13 app router

A content model is nothing until it has content and a frontend. In the last part of this series, we explored a basic schema and content model for a learning platform with Hygraph. In this article, we’ll take that schema and produce a Next.js site using data from Hygraph.

Series:

Creating a learning platform schema

#Requirements

This project uses Next.js 13 and the new App router. This will give us the most flexibility to extend the project in future installments using React Server Components to handle authentication and interactivity. A basic understanding of React and Next.js will help you through this article. If you didn't follow through the content model article, you can clone the Hygraph project here to get started with this article.

#Project setup

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 learning-platform

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.

We’re not entirely done with our setup yet, however. 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 remove the extra styling and leave the file with the following Tailwind imports:

@tailwind base;
@tailwind components;
@tailwind utilities;

That’s all the initial setup we need for the Next.js project, but let’s set up our Hygraph project as well. We’ll start with the learning platform schema created in the first article in this series. To make it accessible to our Next.js project,mustd to open permissions on the Content API.

To do this, navigate 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 to read into our project. From this same screen, grab 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 add the endpoint we copied from Hygraph.

HYGRAPH_ENDPOINT=YOUR-URL-HERE

From here, we can run the site and implement the frontend.

npm run dev

#Setting up the homepage with a list of courses

After the first article in this series, you should have a little content added to your Hygraph project. We’ll use that content to populate the homepage with a list of courses.

In Next.js 13’s App router structure, the homepage file is page.jsx directly in the app directory. The default file comes with a lot of Next.js promotional material; let’s eliminate all that and add a structure for displaying the courses.

// /app/page.jsx

export default async function Home() {
  return (
    <main className="prose w-full py-10 px-5 mx-auto">
      <h1 className="text-3xl font-bold">Our Courses</h1>
      {/* where the courses will be */}
    </main>
  )
}

This will add the h1 to the page and give us space to import our courses.

H1 saying "Our courses" centered on the page

From here, we need a function to fetch the courses. In the new App setup, we don’t need to worry about setting up static paths or props; we need to create a function to fetch the data and then call that function inside our component. In the following code, we set up getCourses to fetch all courses from Hygraph with the data we need to populate the list. In this case, also note the query includes getting the modules for a course. This is so we can check if any module is locked in the data. While we won’t lock them in this demo, we’ll display a lock symbol next to each title with this.

// Get all the courses
async function getCourses() {
  const response = await fetch(process.env.HYGRAPH_ENDPOINT, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: `
        query Courses {
          courses {
            id
            title
            slug
            modules: moduleModels {
              isLocked
            }
          }
        }
        `,
    }),
  });
  const json = await response.json();

  return json.data.courses;
}

// Check if a course contains a module that is locked
function containsLockedModules(modules) {
  return modules.some(module => module.isLocked)
}

export default async function Home() {
  const courses = await getCourses();

  return (
    <main className="prose w-full py-10 px-5 mx-auto">
      <h1 className="text-3xl font-bold">Our Courses</h1>
      {courses.map((course) => {
        return (
          <div key={course.id}>
            <h2 className="text-2xl font-bold">
              <a href={`/courses/${course.slug}`}>{course.title}</a>{" "}
              {course.isLocked} {containsLockedModules(course.modules) && "🔒"}
            </h2>
          </div>
        );
      })}
    </main>
  );
}

This should display a list of all courses, and any that contain a true value for isLocked on a module will display the lock symbol.

Screen with "our courses" and two courses listed below named "Paid content" and "Not paid content"

These links don’t go anywhere, though. Let’s fix that by setting up a new dynamic route.

#Dynamic routes in Next.js 13’s app directory

Dynamic routes function slightly differently in the app directory, but the start is similar. We need a new directory for our dynamic route. Add a courses directory to the app directory.

We’ll add our dynamic route inside this directory, but not as a file as we would in the pages directory. Instead, we’ll add it as a directory. This would allow us to take advantage of all the file-based templates we might want. Name this directory [slug] and add a page.jsx inside it. This file is the template for each course page.

Then we’ll get the end of our URL as the slug variable in our template and can use it from there. To start, let’s get a basic template set up.

export default async function Course({ params }) {
  return (
    <div className="grid-cols-[minmax(200px,250px)_minmax(40ch,_1fr)] grid gap-4">
      <aside className="shadow-md bg-white px-1">
      <h1 className="text-2xl py-4 px-6 font-bold">Course nav</h1>

      </aside>
      <main className="prose w-full py-10 px-5 mx-auto">
        <h1 className="text-3xl font-bold">Course title here for {params.slug}</h1>
      </main>
    </div>
  );
}

This contains a sidebar for the course’s navigation and a main area for the content of this page. Right now, we’re not dynamically pulling data, though. Let’s fix that by using the slug from our parameters and passing that to a query to Hygraph.

We’ll create a new async function in the page file to fetch a course by the slug. We’ll get all the data we need to display: title, content, modules, and lessons from the relational fields attached to the model. The relational data will be used to build our course navigation.

async function getCourse(slug) {
  const res = await fetch(
    "https://api-us-east-1-shared-usea1-02.hygraph.com/v2/clddka9yq1aw301ui7zzh4kf3/master",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query: `
        query Course($slug: String!) {
            course(where: {slug: $slug}) {
                createdAt
                id
                slug
                publishedAt
                title
                updatedAt
                body {
                    json
                    references {
                        ... on Asset {
                            __typename
                            id
                            url
                            mimeType
                        }
                    }
                }
                modules: moduleModels {
                    isLocked
                    title
                    lessons {
                      id
                      title
                    }
                  }
                
            }
        }`,
        variables: {
          slug: slug,
        },
      }),
    }
  );
  const data = await res.json();
  return data.data.course;
}

export default async function Course({ params }) {
  const courseData = await getCourse(params.slug);
  return (
    <div className="grid-cols-[minmax(200px,250px)_minmax(40ch,_1fr)] grid gap-4">
      <aside className="shadow-md bg-white px-1">
        <h1 className="text-2xl py-4 px-6 font-bold">Course nav</h1>
      </aside>
      <main className="prose w-full py-10 px-5 mx-auto">
        <h1 className="text-3xl font-bold">{courseData.title}</h1>    
      </main>
    </div>
  );
}

Once that’s saved, we should now have the title displayed on the course page.

Course page for course "Not paid content" showing the headline and a sidebar with blank navigation Our next task is to get the rich text content for the course.

Converting a Rich Text AST object to HTML with Hygraph’s RTE React component

The rich text from Hygraph can come through as a JSON object. This can be fully customized for our frontend via the Rich Text React Renderer. To use this, we need to install it first.

npm install @graphcms/rich-text-react-renderer

This will give us access to the easiest way to render rich text in a React application.

To use it, we need to pass the body JSON object to the component along with the references for the embeds in the rich text (in this case, assets and potentially references to lessons).

Start by importing the RichText component at the top of the file.

import { RichText } from "@graphcms/rich-text-react-renderer"

This is now ready to use in our content body. Before displaying the component, we also need to check if courseData.body exists, since it’s not a required field. If the data didn’t exist, the page would error instead of displaying.

export default async function Course({ params }) {
  const courseData = await getCourse(params.slug);
  return (
    <div className="grid-cols-[minmax(200px,250px)_minmax(40ch,_1fr)] grid gap-4">
      <aside className="shadow-md bg-white px-1">
        <h1 className="text-2xl py-4 px-6 font-bold">Course nav</h1>
      </aside>
      <main className="prose w-full py-10 px-5 mx-auto">
        <h1 className="text-3xl font-bold">{courseData.title}</h1>
        {courseData.body && (
          <RichText
            content={courseData?.body?.json}
            references={courseData?.body?.references}
          />
        )}
      </main>
    </div>
  );
}

Once those changes are in, we have the body for the course displayed, including any images you may have added.

"Not paid content" Course page with rich text displaying Now, let’s work on the course navigation.

Setting up the course navigation with modules and lessons

Since this will be on multiple pages, let’s abstract the navigation to its own component. Start by creating a new components directory inside the app directory. This will house our shared components.

Create a Navigation.jsx file with HTML from the course page.

export default function Navigation({}) {
  return (
    <aside className="shadow-md bg-white px-1">
      <h1 className="text-2xl py-4 px-6 font-bold">Course nav</h1>
    </aside>
  );
}

Then replace the content on the page with the new component. Start by importing it at the top of the file.

import Navigation from "@/app/components/Navigation";

Then add it where the old nav was.

export default async function Course({ params }) {
  const courseData = await getCourse(params.slug);
  return (
    <div className="grid-cols-[minmax(200px,250px)_minmax(40ch,_1fr)] grid gap-4">
      **<Navigation />**
      <main className="prose w-full py-10 px-5 mx-auto">
        <h1 className="text-3xl font-bold">{courseData.title}</h1>
                {/* ... the rest of the file */}
            </main>
        </div>
    )
}

We need a few pieces of information from our data passed in. Let’s pass the course title and slug, the modules data, and the lessons data.

<Navigation title={courseData.title} slug={courseData.slug} modules={courseData?.modules} lessons={courseData?.lessons} />

Once that data is passed to our component, we can build out the navigation by looping through the module and lesson data. We can even check if the module is locked and add the lock icon as we did on the homepage.

export default function Navigation({ title, slug, lessonId, modules }) {
  return (
    <aside className="shadow-md bg-white px-1">
      <h1 className="text-2xl py-4 px-6 font-bold">{title}</h1>

      {modules &&
        modules.map((module) => (
          <div key={module.id} className="relative">
            <h2 className="text-xl py-4 px-6 font-bold">{module.title}</h2>
            <ul className="relative">
              {module.lessons &&
                module.lessons.map((lesson) => (
                  <li key={lesson.id} className="relative">
                    <a
                      className={`flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out ${
                        lessonId === lesson.id ? "bg-gray-100" : ""
                      }`}
                      href={`/courses/${slug}/lessons/${lesson.id}`}
                    >
                      {lesson.title} {module.isLocked ? "🔒" : ""}
                    </a>
                  </li>
                ))}
            </ul>
          </div>
        ))}
    </aside>
  );
}

Now we have a full course page complete with navigation. Note in the code that we’re also checking for a matching lessonId. We haven’t passed that in yet, but this will be how we deal with active states in the navigation in the next section.

"Not paid content" course page with sidebar nested navigation showing two modules with the first module showing two lessons The navigation links are all broken, though. That’s because we haven’t created those dynamic routes yet.

Nesting lesson dynamic routes in the Next.js app router

To create the lesson routes, we want to nest them under the course. To nest the route in Next.js, the new directory should live under /app/courses/[slug] to nest this route under the appropriate course route. In this case, we'll name that directory lessons and put an [id] directory inside. This [id] directory is where we'll put the new page.jsx file that will create our page. This will pass an ID to our parameters allowing us to query Hygraph to fetch the appropriate lesson data.

This query is a bit more complicated. Not only do we need to get the lesson with a matching ID, but we also need deeper information about the course and module to build the navigation properly.

// /app/courses/[slug]/lessons/[id]/page.jsx
import Navigation from "@/app/components/Navigation";
import {RichText} from "@graphcms/rich-text-react-renderer";

async function getLesson(id) {
  const response = await fetch(
    "https://api-us-east-1-shared-usea1-02.hygraph.com/v2/clddka9yq1aw301ui7zzh4kf3/master",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query: `
            query Lesson($id: ID!) {
                lesson(where: {id: $id}) {
                    id
                    title
                    body {
                        json                                                
                    }
                    moduleModel {
                        isLocked
                    }
                    description
                    title
                    videoUrl
                    navDetails: moduleModel {
                        title
                        course {
                            title
                            slug
                            modules: moduleModels {
                                id
                                isLocked
                                title
                                lessons {
                                  id
                                  title
                                }
                              }
                        }
                        lessons {
                            id
                            title
                        }
                    }
                }
            }
            `,
        variables: {
          id,
        },
      }),
    }
  );
  const json = await response.json();

  return json.data.lesson;
}

export default async function Lesson({ params }) {
  const {
    id,
    navDetails,
    title,
    body,
    moduleModel,
    loggedIn = true,
  } = await getLesson(params.id);
  return (
    <div className="grid-cols-[minmax(200px,250px)_minmax(40ch,_1fr)] grid gap-4">
      <Navigation
        lessonId={id}
        title={navDetails.course.title}
                slug={navDetails.course.slug}
        modules={navDetails.course.modules}
        lessons={navDetails.lessons}
      />
      <main className="prose w-full py-10 px-5 mx-auto">

      <h1 className="text-3xl font-bold">{title}</h1>
      <RichText
        content={body?.json}
      />
    </main>
        </div>

  );
}

At this point, we now have a fully functioning course and lesson structure.

"My Second Lesson" page showing rich text and a sidebar navigation with the correct lesson selected

#Next steps

So far in this series, we’ve created a content model for our learning platform and we’ve implemented the simple frontend in Next.js.

From here, put some more content in Hygraph, explore how it affects the frontend, and work on any styling you’d like to update.

In the next post in the series, we’ll work on locking the locked lessons and integrating with an authentication platform to check whether a user can access the content.

Blog Author

Bryan Robinson

Head of Developer Relations

Bryan is Hygraph's Head of Developer Relations. He has a strong passion for developer education and experience as well as decoupled architectures, frontend development, and clean design.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.

Frequently Asked Questions

Getting Started & Implementation