Creating a learning platform with Next.js 13 app router

Based on the schema and content model we created in the previous part of this series, we will produce a Next.js site using Hygraph data.

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:

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.

Read the full post here.

Bryan Robinson

This is the bio of this human. You could also add a title if you really wanted to.

Everything you need for growth.

From automating workflows to engaging your audience across multiple channels, v01 provides everything you need to drive your SaaS startup’s success.

Automation builder

Omnichannel inbox

Email campaigns

SMS campaigns

Ad audiences

Split testing

Dynamic content

Form builder

Email designer

User segmentation

Pipelines

Lead scoring

Auto attribution

Dashboards and reports

Calendar booking

Social media scheduler

Generative AI

Easy import/export

Custom integrations

and more...

Jordan James

Founder @ JJM

"We have worked with some marketing CRMs before. The biggest benefit for us has been the reduction in manual data handling. The CRM pulls everything together in one place, and the automation features have made our workflow much smoother."

Dylan Poulton

VP Marketing @ WithYouWithMe

"Honestly, first I had some concerns about migration from Hubspot to v01. The guys did a great job in guiding us through the process. In the end it only took 20 minutes since the system matched 90% of the data correctly and it was easy to manually match the rest"

Oliver Pollasky

Founder @ Mammoth Hunter Club

"I appreciate how intuitive the CRM is. It's saved us a ton of time on data entry and campaign tracking. There are some features we're hoping to see in future updates, but overall, it's been a valuable addition to our marketing toolkit."

Cameron Cortazzo

Director @ FutureFundraising

"v01 has been a real game changer for our marketing team. Integrating it with our other tools was a breeze, and the automation features have saved us so much time. It's super easy to use too."

Jack Desmond

Founder

"The best thing about v01 is how much time it saves us. Data entry and campaign tracking used to be such a hassle, but now it's all streamlined. It's made a big difference for our team."

Still have questions?

The v01 CRM collects and unifies customer data from multiple sources to create comprehensive customer profiles for detailed segmentation and personalized marketing. This goes beyond typical Customer Relationship Management (CRMs) that stores customer data to manage interactions. With v01, you have everything you would typically expect from a CRM plus all the growth automation tools needed for PLG growth.

Meet your new PLG automation platform.

Automate your marketing and increase conversions. Sign up for access today.

Start free trial
v01