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.

undefined

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.

undefined

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.

undefined 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.

undefined 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.

undefined 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.

undefined

#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.