Creating a learning platform with Next.js 13 app router

npx create-next-app learning-platform

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

HYGRAPH_ENDPOINT=YOUR-URL-HERE

npm run dev

// /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>
  )
}

// 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>
  );
}

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>
  );
}

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>
  );
}

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

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

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>
  );
}

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>
  );
}

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

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>
    )
}

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

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>
  );
}

// /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>

  );
}